Tailwind CSS: How to Optimize Performance with Shruti Balasa

Summary

The discussion delves into the evolution of Tailwind CSS, addressing criticisms about its large CSS file size due to its atomic approach. It explains how Tailwind's utility-first methodology generates only the CSS needed for a project, optimizing file size. The conversation highlights the shift from version 2's post-CSS PurgeCSS plugin to version 3's Just-In-Time (JIT) compiler, which reads source code to generate only the necessary CSS classes, enhancing performance. The JIT compiler also enables dynamic class generation, such as custom color utilities, without increasing the stylesheet size. The talk emphasizes the importance of proper class naming for the JIT compiler to function effectively, ensuring developers don't inadvertently deoptimize their code.

Takeaways

• 🔧 Tailwind CSS has evolved to improve upon older practices like using the PurgeCSS plugin, which is no longer necessary for many projects.
• 🎯 One common critique of Tailwind is the large size of its CSS file due to the one-class-per-rule approach, but this is mitigated by the fact that it only ships the CSS that's actually used in the project.
• 🚀 Tailwind's utility-first approach can result in a more efficient delivery of styles compared to traditional CSS, where the same rule might be repeated multiple times across different classes.
• 📈 The Just-In-Time (JIT) compiler introduced in Tailwind CSS version 3 optimizes performance by generating only the CSS that's used in the source code, eliminating the need for PurgeCSS.
• 🌐 The JIT compiler allows for a more extensive range of utility classes without significantly increasing the size of the CSS bundle, which was a limitation in earlier versions of Tailwind.
• 💡 The JIT compiler's method of reading the source code before generating CSS is a significant innovation that streamlines the development process and enhances performance.
• 📝 Developers should ensure that class names are written as complete strings in their source code for Tailwind to correctly identify and generate the necessary styles.
• 🛠️ Conditional class names or those generated dynamically should be concatenated into full class names to be recognized by Tailwind's JIT compiler.
• 🌟 Tailwind's evolution showcases the benefits of open-source development, where community feedback and innovation lead to significant performance optimizations and usability improvements.
• 📦 The shift from tree shaking to JIT compilation in Tailwind CSS represents a paradigm shift in how CSS is managed and optimized in web development.

Q & A

What was the purpose of the PurgeCSS plugin in the earlier versions of Tailwind CSS?

PurgeCSS was used to remove unused CSS from the final build in earlier versions of Tailwind CSS. It would scan the project's source code and remove any classes that weren't used, optimizing the production build by reducing its size.

What is the criticism against Tailwind CSS regarding class names and file size?

The criticism is that Tailwind CSS generates a large CSS file because it creates one class name per rule, which could lead to megabytes of CSS being shipped to users. However, this is a misconception because Tailwind CSS only ships the styles that are actually used in the project.

How does Tailwind CSS handle the generation of CSS for a large number of elements using the same style rule?

Tailwind CSS generates the style rule once in the stylesheet, and it's applied to all elements that use that class. This is more efficient than traditional CSS where the same rule might be repeated for each element in the stylesheet.

What is the significance of the 'Just-In-Time' (JIT) compiler introduced in Tailwind CSS version 3?

The JIT compiler in Tailwind CSS version 3 generates only the CSS that is used in the source code, eliminating the need for PurgeCSS. This means the development and production stylesheets are the same, and it optimizes performance by not generating unused styles.

How does the JIT compiler in Tailwind CSS improve the efficiency of CSS delivery?

The JIT compiler reads the source code first and generates only the class names that are used, which is an additive process. This approach reduces the amount of code shipped compared to traditional CSS where the same rule might be shipped multiple times.

What is the impact of Tailwind CSS's JIT compiler on the ability to use custom colors?

With the JIT compiler, developers can use a wider range of utility classes, including custom colors, without having to add them manually to the configuration. This is because the compiler generates the necessary styles on the fly, reducing the initial bundle size.

Can you explain the concept of 'tree shaking' in the context of Tailwind CSS and how JIT compiler changes this?

Tree shaking is a technique to remove unused code. In Tailwind CSS version 2, this was done by generating a large CSS file first and then removing unused classes. With the JIT compiler in version 3, the process is reversed; it reads the source code first and generates only the necessary CSS, making tree shaking unnecessary.

What is the benefit of shipping less code with Tailwind CSS compared to traditional CSS?

Shipping less code with Tailwind CSS can lead to faster load times and reduced bandwidth usage for users. It also means that the browser has less CSS to parse, which can improve rendering performance.

How can developers potentially deoptimize their code when using Tailwind CSS with JIT?

Developers might deoptimize their code by splitting class names across different lines or using variables that don't form complete class names. Tailwind CSS requires full class names to be discoverable for JIT compilation.

What advice can be given to developers to optimize their use of Tailwind CSS with the JIT compiler?

To optimize the use of Tailwind CSS with the JIT compiler, developers should ensure that class names are written as complete strings without being broken up. This allows the compiler to discover and generate the necessary styles efficiently.

Outlines

00:00

🌐 Tailwind CSS Evolution and Performance

The paragraph discusses the evolution of Tailwind CSS, highlighting the improvements over time. It mentions the use of a plugin called PurgeCSS to optimize CSS in older versions. The speaker counters criticisms about the size of Tailwind's CSS file by explaining how utility classes work and how they can actually reduce the amount of CSS shipped compared to traditional methods. They provide an example of how using 'display: flex' in 100 elements would be more efficient with Tailwind CSS, as the rule is included only once in the stylesheet. The paragraph also touches on the Just-In-Time (JIT) compiler introduced in Tailwind CSS version 3, which generates only the necessary styles, thus optimizing both development and production environments.

05:01

🚀 JIT Compiler and Tailwind CSS Innovations

This section delves into the Just-In-Time (JIT) compiler's impact on Tailwind CSS, contrasting it with the previous approach of generating a large CSS file and then purging unused styles. The JIT compiler reads the source code first and generates only the necessary styles, making the development and production stylesheets identical. The paragraph also discusses the ability to use more utility classes without bloating the CSS file, thanks to JIT. It mentions the convenience of using direct color values in class names, enabled by JIT, and reflects on the overall innovation and optimization in Tailwind CSS's approach to CSS generation.

10:03

⚙️ Best Practices for Tailwind CSS Usage

The final paragraph emphasizes the importance of proper class name usage in Tailwind CSS to ensure optimal performance with the JIT compiler. It warns against breaking class names across multiple lines or using variables that concatenate class names, as this can prevent Tailwind from recognizing and generating the necessary styles. The paragraph reinforces the need for full class names to be present in the source code for JIT to function correctly, ensuring that developers are aware of how to avoid potential pitfalls and maintain the efficiency of their CSS.

Keywords

💡PurgeCSS

PurgeCSS is a tool used in the context of the video to remove unused CSS from a project. It's part of a process to optimize the final build of a website by eliminating unnecessary styles that are not actually applied to any elements. This is crucial for performance optimization, as it reduces the size of the CSS file that needs to be loaded by the browser. In the video, it's mentioned as a plugin used in the past with Tailwind CSS to ensure that only the CSS classes actually utilized in the project are included in the final stylesheet.

💡Tailwind CSS

Tailwind CSS is a utility-first CSS framework that allows developers to build custom designs without writing CSS rules from scratch. It provides a set of classes that can be applied to HTML elements to style them directly. The video discusses how Tailwind generates one class name per rule, which can lead to criticism about its file size, but also how it can be optimized with techniques like PurgeCSS and Just-In-Time (JIT) compilation.

💡Atomic CSS

Atomic CSS refers to a methodology where CSS is broken down into small, reusable units or 'atoms'. Each class in Atomic CSS represents a single styling property, which can be combined in various ways to create complex designs. The video discusses how Tailwind CSS operates on this principle, generating one class for each styling rule, which can lead to a more efficient use of CSS in large projects.

💡Just-In-Time (JIT) Compiler

The Just-In-Time (JIT) compiler in Tailwind CSS is a feature introduced in version 3 that generates styles only for the classes used in the source code. This is a significant optimization over the previous approach where a large set of possible styles was generated and then purged down to the used ones. The JIT compiler ensures that the development and production CSS are the same, reducing the need for PurgeCSS and improving performance.

💡Tree Shaking

Tree shaking is a term borrowed from JavaScript optimization, referring to the process of removing unused code. In the context of the video, it's mentioned in relation to how Tailwind CSS's JIT compiler works, by 'reading' the source code to determine which styles are needed and only generating those, thus 'shaking the tree' of unused styles.

💡Performance Optimization

Performance optimization in web development involves improving the speed and efficiency of a website. The video discusses how Tailwind CSS, through its utility-first approach and JIT compilation, can contribute to performance optimization by reducing the amount of CSS that needs to be shipped to the user, thus decreasing load times and improving user experience.

💡Class Names

In the context of the video, class names refer to the specific strings used in HTML to apply styles defined in CSS. Tailwind CSS uses a naming convention for its utility classes, such as 'bg-green-500' for a green background. The video emphasizes the importance of using full class names consistently, as the JIT compiler relies on these to generate the necessary styles.

💡CSS File Size

The size of a CSS file is a concern for web performance, as larger files take longer to download and parse. The video discusses criticisms of Tailwind CSS for potentially generating large CSS files due to its utility-first approach. However, it also explains how techniques like JIT compilation can mitigate this by ensuring only used styles are included.

💡Development vs Production

The video contrasts the development and production environments in web development. Development is where code is written and tested, often with more comprehensive tools and features. Production refers to the final, optimized code that is deployed to users. Tailwind CSS's JIT compiler ensures that the development environment can be as close as possible to production, with minimal differences in the CSS.

💡Utility Classes

Utility classes in CSS are predefined classes that apply specific styles. Tailwind CSS is built around the concept of utility classes, offering a wide range of classes for quick and efficient styling. The video discusses how Tailwind's approach to utility classes can lead to more efficient CSS usage compared to traditional CSS development.

Highlights

The necessity of using a post CSS plugin called Purge CSS in the past to optimize Tailwind CSS.

Criticism of Tailwind CSS for generating one class name per rule, leading to a large CSS file.

Explanation that in large projects, using Tailwind CSS can actually reduce the stylesheet size compared to traditional CSS.

Tailwind CSS's utility classes only generate the styles that are used, optimizing the amount of code shipped.

The introduction of the Just-In-Time (JIT) compiler in Tailwind CSS version three, which improves performance.

How JIT compiler works by reading the source code first and generating only the necessary styles.

The ability to use more utility classes without impacting the development speed due to JIT compiler.

The impact of JIT on allowing dynamic class names like text-[#hexcode] in Tailwind CSS.

The shift from tree shaking to reading source code before generating styles in JIT compiler.

The importance of having complete class names for Tailwind CSS to discover and generate styles.

The potential for developers to deoptimize their code by breaking class names in conditional statements.

Advice for developers to ensure class names are not broken by spaces or different lines for JIT compiler to function properly.

The historical context of Tailwind CSS's evolution from version two to three and the improvements in performance and usability.

The significance of the JIT compiler in making Tailwind CSS more accessible and efficient for developers.

The practical benefits of JIT for developers, such as not needing to purge unused styles for production.

The innovative approach of JIT in optimizing CSS generation based on actual usage in the source code.

The potential for JIT to change the way developers think about and implement CSS in their projects.

Transcripts

there was also a plugin that you had to

use back with back in the day and this

is obviously thank God has has been

fixed or improved upon um you would have

to use a post CSS plugin called Purge

CSS um to do something and also a big

criticism that I've heard from Tailwind

haters which I think they're all wrong

um but you know whatever let's be

objective about it is um is that

Tailwind generates one class name per

rule right so like Flex is only display

Flex there's nothing more in that

declaration um grid is display grid and

so on and so forth so it's like one

class so some people um who maybe aren't

as familiar with the concept of atomic

CSS or Tailwind or utility classes it

they they criticize Tailwind saying

that's a massive CSS file it's meab how

how can you ship megabytes of CSS to

your users um what's an appropriate

response to that uh the response to that

is the larger projects that you're using

right now you're literally using Flex on

all your elements okay so let's say you

have a 100 elements where you're using

Flex which is which is not huge 100 is

because these days you know we use flex

for everything back in those days I

don't know how we worked without it but

now that it's available you know then

for vertical elements we use flex call

you know for icons for everything so

let's say for 100 elements you're using

the class Flex okay and that rule is in

stylesheet it is generated only once

okay but let's say you have 100 elements

in your stylesheet you have 100 elements

and there's that display Flex rule 100

times so how do you how do you say that

uh you know that is okay and this is not

So eventually if you see if you look at

the entire project and um you look at

the stylesheet it kind of evens out and

uh most huge projects also have uh CSS

files which are less than 10

KB that's because um you know of this

this is the the way I explained I don't

know how to explain it better than that

but uh it's not how you think it will

happen like even if it's one rule you're

using that rule in multiple places so

you're eventually reducing the Styles

sheet itself not increasing it I love

this because it makes the case um for

tailin CSS to be also like outside of

just convenience we already talked about

for example context switching and naming

U and the base reset Styles outside of

these developer conveniences there's

also enduser conveniences because it um

in theory or actually not in theory in

practice ships less code than

traditional CSS because of what you

mentioned because typically in an

application if you have 100 different

classes that have a rule display Flex

then you ship that line display Flex 100

times more than you need to whereas with

tailor and CSS and utility classes that

rule display Flex is shipped once that's

a what is that's like a um 100x

Improvement um in how much code you ship

not exactly you're still writing Flex in

HTML but still yeah you

know right um Fair yeah you're right so

it's four bytes for every how many ever

um display Flex yeah good thank you for

correcting that um there's also this

thing that Tailwind used to do where it

would as as part of the post CSS process

remove like it would read your source

code and look at the class names you're

using and then from that big final

generated CSS file would just like

remove classes you're not using as a as

a build optimization um is that still

the case how how does that impact

performance I mean obviously positively

probably right because it removes a

bunch of unused stuff so that was back

in version 2. something Tailwind CSS had

these uh I don't know like you know tens

of thousands of uh class names fixed

class names like every single class name

that you see in the you know the

documentation all of this was there so

you would in your development you would

take that entire thing and just use the

ones that you need and you had to

actually purge them for production so

your production stylesheet would be

different from your development one

right and that was back then then came

the just in time compiler so what just

in time does is it doesn't ship I mean

it doesn't give you that entire

stylesheet when you

develop the only Styles it generates is

are the one that it that are there in

your source code from the beginning in

development itself so your development

stylesheet is same as the one as

production and then this Justus in time

uh compiler became the default from

version three onwards so people who are

using Tailwind version three onwards

don't even know what the spurge thing is

so if they come this yeah they don't

need to if they come across this and

block post or videos they might really

wonder oh do I have to do this uh that

means you know because they see the

discussion right and the discussion is

like you know T you know if you don't

Purge you get like this huge style sheet

and they probably are still under that

impression but no tailin generates only

those styles that are there from the

beginning this is so cool this is I

think there's a big um engineering

optimization performance idea here that

a lot of developers can extract and take

away this is a really I and I want

everybody to sort of listen to this

right and you can tell me Shy if this is

um appropriate or accurate but what I'm

hearing is so in version two Tailwind

did this thing where they um generate a

bunch of CSS step one like a big CSS

file um and then read the source code

the classes you you use and then

basically remove the classes that are

not used from the spig Cs that was that

was version It's called and then with

the just in time compiler in version

three right Tre exactly and in in

version three what they do with this jit

or justtin time compiler is instead of

that flow they start with not generating

a big bundle but they start with reading

your code because they're going to read

your code anyway and in version two they

were doing it after but now if you do it

first you can look at all the class

names and then only generate the class

names that are used so it's not removing

anything it's actually an additive

process is that accurate yes that is

cool um and

if I may add something here that gave

them the so in in version two what uh if

you needed these extra colors like uh

the default was gray and then there

there there was red and there was orange

and all of those but now you can use all

the colors like slate and stone Amber uh

fuchsia all of these by default you

don't have to add them in your config

earlier you had to add them in your

config all these to use all these new

colors because I mean imagine shipping

that huge a bundle right I mean they

can't you can't download I mean you

can't put that entire thing in

development it'll slow down your

development right so now because of this

jit thing they are able to give us a lot

more utility classes uh without the

developer having to even know that you

know they have to add them or something

like

this that's so cool there should be a

class like Amber but Amur and it's just

the color of biryani oh my gosh that

would be so cool

um I I think another consequence of this

J JW JW jit that that we're talking

about is um the ability to do something

like text Dash square brackets hex code

right and that's because it's just in

time it can literally just generate that

on the

Fly is so

cool amazing I it's just the Innovation

blows my mind um to go from tree shaking

to look we're going to read the source

code anyway so instead of reading the

source code after generating you just

read the source code before I man that's

just it it blows my mind how cool that

was um and again I hope this is open and

that discussion would be fun to even

follow after the fact like we've had it

for I think years now but to see how

it's done right and I think that's the

beauty of um open source so cool um so

in code you can still like so for

example JavaScript is is super super

optimized like the engine are um they're

optimized to the point where it's very

difficult often times to like deopt

yourself and JavaScript meaning to do

something that's going to make the

engine do more work than necessary and

be slower um but people still do it also

in react for example there's they try to

make it easy to make performance

applications but sometimes you in an

effort to optimize your code you end up

de optimizing your code meaning you'll

cause like unnecessary memory allocation

um in the case of imports sometimes you

can import modules in a way that doesn't

allow tree shaking so you like deopt

yourself you deoptimized um in Tailwind

with the jit with all of this um are

there still ways that developers should

know about that they may be de

optimizing their code and if yes what

can they do to to help

that um maybe not de optimizing but one

thing they need to know is their class

names will not be discovered if they are

broken

uh for example let's say you add a BG

somewhere in your let's say you have a

react component or something and then

you're saying that you know class name

is BG hyphen and then if uh this is

Success then green 500 or you know else

let's say red 500 something like that so

those classes are broken there in the

code in the source code right Tailwind

will not be able to discover them they

have to be completely BG green 00 BG red

500 because Tailwind hases that pattern

matching so for Tailwind green 500 is

not a class name BG green 500 is so if

you're going to uh have your class names

like conditional classes or something or

wherever else have you can totally have

them in your JS files but they have to

be full they have to be the entire class

name don't split them anywhere uh

probably that's the only thing they need

to know there's no way you can uh you

know maybe under like whatever de

optimize I I don't think there's a way

Yeah Yeah by by Broken you mean broken

by space so they have to be like one

consistent string right yeah not just

space like in different lines like you

know you you put a variable like class

equals BG and then you append green 500

and you append something so in the you

know yeah they scans the file and it

can't find the entire class name so then

it would be available yeah