Are you considering using Tailwind CSS rather than Styled-components or another CSS in JS solution? In this post, you will learn the advantages and disadvantages of each approach.
First, Let's start by explaining the good and bad things about each of them, and at the end, let's jump to conclusions where you can see my way to go and decide yours.
Tailwind CSS
Tailwind CSS is a utility-first CSS framework. It means that they provide a set of CSS classes representing each combination of CSS property and value. For example, p-4 represents padding: 1rem and block represents display: block;
So you may be wondering why we need to use classes instead of writing the CSS directly in an HTML style tag? There are many reasons for that, especially with Tailwind CSS that comes equipped with good defaults for sizing, colors, and helpers for responsible classes.
You can't apply responsive styles directly in your HTML style attribute. You will need to have a CSS file or create a style tag inside your HTML to achieve this.
Let me show the potential of Tailwind CSS with one example:
HTML+CSS
<div class="button">
Click Me
</div>
<style>
.button {
background-color: red;
color: white;
border-rounded: 3px;
text-align: center;
}
.button:hover {
background-color: black;
}
@media (min-width: 768px){
.button {
margin-bottom:4px;
}
}
</style>Tailwind CSS
<div class="bg-red-400 text-white rounded text-center hover:bg-black md:mb-4">
Click Me
</div>As you can see, in the HTML+CSS example, we needed to use a style tag to add a hover state and responsive styles to our button. But with Tailwind CSS, We achieved the same with fewer code lines, and using some specific prefixes to our CSS classes like hover: or md: we can extend the use of the base utilities.
Another good point of Tailwind CSS is their default settings and the possibility of extending or replacing their defaults. It will allow you to share your theme between different projects and have good defaults when working with the team gaining consistency across your design.
Finally, Let's talk about the final CSS bundle size delivered to the browser. By default, Tailwind CSS will generate all the CSS utilities class name combinations, but many of those CSS classes will not be used in your project. Minified It's about 399kb. We have two solutions to reduce the final bundle size.
The first one will be by manually adding only the necessary theme settings inside your project, but there is a high chance you to miss some of them, and even with that, you will still delivering unused classes to your bundle.
The second and the recommended way is to use PurgeCSS, This library is already build-in Tailwind CSS, and It can be activated easily from your Tailwind config file.
PurgeCSS is in charge of automatically removing the unused classes, providing the paths to your HTML/JS files. This library will scan those files and extract the unused class names from the final bundle.
For more information check their docs: https://tailwindcss.com/docs/optimizing-for-production#purge-css-options
To summarize the pros and cons of using Tailwind CSS:
Pros
✅ Good defaults
✅ Extensible theme settings
✅ Easy to share your theme settings between projects
✅ Small bundle size
✅ Very good DX
✅ Fast for prototyping
✅ No class names conflict
Cons
❌ You will need to get used to the class names
❌ PurgeCSS requires to work to avoid generating the class names dynamically
❌ Write your logic to add or remove classes from your HTML
Styled-components
Styled-components is one of the most famous CSS in JS solutions. It works with React components and allows you to generate presentational components easily using pure CSS syntax.
With Styled-components, you can use Sass style syntax to write nesting rules. When your components render, they automatically generate unique class names.
An example of a Button component with styled-components would be:
const Button = styled.a`
background-color: red;
color: white;
border-rounded: 3px;
text-align: center;
&:hover{
background-color: black;
}
@media (min-width: 768px){
margin-bottom:4px;
}
`;
<Button>Click me</Button>
With the help of webpack, you can generate the critical CSS based on the components rendered for each page and deliver it using SSR with a code-splitting implementation.
On the client-side, when a new component is rendered the CSS from that component is injected inside a global style tag and removed from it when the component is unmounted.
Pros
✅ Generate your components and CSS in one time
✅ Use native CSS syntax
✅ Write CSS conditionals using Javascript
✅ Easy to start using
✅ Good DX
Cons
❌ No default theme
❌ Responsive need to be writing by hand
❌ Rules are needed to keep the consistency in your design.
❌ With Typescript, the DX decrease.
❌ Similar components can deliver the same CSS.
Conclusions
Both solutions are excellent. I had experience using both of them in production. But lately, I'm more inclined to the Tailwind CSS approach, and the main reason for this is their default theming and their easy way to apply responsive, dark mode, and other utilities to those based classes.
On my previous projects with styled-components, one of the main challenges I had with my team was defining good defaults to generate consistency between our projects. And we had spent a lot of time creating utilities to apply in the styled-components way responsive and dark mode styles, but it resulted in increasing the complexity of our code. Since we started using Tailwind CSS, that problem disappear, and everyone is happy now using it.
Once you get used to their syntax, I can guarantee that your DX and Development speed will increase considerably.
Extra tip:
If you are using VScode (not sure about other IDEs), but with the Tailwind CSS IntelliSense plugin, you can have autocompletion for your class names directly from your tailwind theme settings file.
More information here: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss