Front-end development can be tricky. At OLA Campus Pune we use multiple libraries and SDKs to provide the best user experience. Our Engineers work with all the latest technologies like Vue.js, Maplibre, Windi Css& Tailwind CSS. Today, we will talk about some best practices for Tailwind CSS.
We use Tailwind CSS and Windi CSS as our primary frameworks for styling our internal/external applications.
In this blog post, we will cover the following:
- What is Tailwind CSS?
- Tailwind CSS Best Practices
- Takeaways
What is Tailwind CSS?
Tailwind CSS is a utility-first open-source CSS framework. Unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables.
Some of the notable benefits of Tailwind CSS are:
- Less Custom CSS
- Small CSS File
- Predefined design system
There are multiple reasons to use Tailwind, but here is a list of problems with the legacy CSS system, which Adam Wathan (Tailwind's creator) has listed here in the blog.
Top 5 Best Practices for Tailwind
Keep fewer Utility classes
Utility classes allow you to write responsive web pages without CSS, but sometimes users use multiple utility classes. The best practice is to keep your code as short as possible with all the functionalities. Users should avoid using multiple utility classes.
<div class="mx-10 md:mx-20 lg:mx-32 xl:mx-44 2xl: mx-64">
</div>
Here in the above code you can observe multiple utility classes are being used to narrow down content as per viewport. While this can be done using a screen size utility class in a single line.
<div class="max-w-lg mx-auto">
</div>
Don't use string concatenation to create class names
Tailwind uses PurgeCSS, which deletes or removes all the unused classes in production. It is done to keep the CSS file as small as possible. Due to this, Concatenated strings are not picked up. To avoid this, dynamically select the complete class name.
Example:
<div class="text-<%= error ? 'red' : 'green' %>-400"></div>
One can observe the string concatenation. As a result, the above CSS will not be applied in production. Therefore use the complete class name.
Example:
<div class="<%= error ? 'text-red-400' : 'text-green-400' %>"></div>
Disable Preflight when integrating Tailwind to an existing project
If you try adapting Tailwind to your existing projects, you should disable the preflight in the tailwind config file. As per documentation: Preflight is a set of base styles for Tailwind projects, making it easier for you to work within the constraints of your design system. Preflight removes all default margins, font sizes and other similar classes for all your elements.
It can be done using a small change in tailwind config file:
// tailwind.config.js
module.exports = {
corePlugins: {
preflight: false,
},
};
Use Concentric CSS approach
There are multiple times one needs to write multiple strings in a single utility class, while to keep things organized, always use a concentric CSS approach, which means moving from outside to the inside of a box (i.e,. 1. positioning/visibility 2. box model 3. borders 4. backgrounds 5. typography 6. other visual adjustments), explained in the image below:
Once familiar with the approach, using css classes would be much easier.
Don't use the margin on every child
If you have multiple child classes, instead of specifying margins or gaps to every child, provide specific utility classes to the parent class.
For example:
<div>
<div class="mb-2 mt-2"></div>
<div class="mb-2 mt-2"></div>
<div class="mb-2 mt-2"></div>
<div class="mb-2 mt-2"></div>
<div class="mb-2 mt-2"></div>
</div>
Instead you can use here a space/gap utility class:
<div class="space-y-4">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Takeaways:
We had a turnaround with many essential best practices for Tailwind such as:
- Keep fewer Utility classes
- Don't use string concatenation to create class names
- Disable Preflight when integrating Tailwind to an existing project
- Use Concentric CSS approach
- Don't use the margin on every child
While there is much helpful content on the tailwind CSS documentation, it can be found here
OLA Campus Pune uses the latest libraries and SDKs to create the best user experience. With a diverse team of software engineers, data scientists & GIS Technologists; trying different tools & experimenting with other technologies is something we always promote.
We look forward to sharing more of our workflows in the coming days. If you have some feedback or have found this blog post of your interest, do Connect with Us!
Top comments (0)