TailwindCSS is an incredibly powerful tool for both frontend developers and designers, offering a holistic approach to styling HTML and web components. With its built-in design system, a wide range of colors, short class names, and more, Tailwind helps streamline the styling process.
In this article, I’m going to share 5 tricks that you can apply right away to supercharge your workflow. These tips will help you speed up the design process, eliminate tedious steps, and get straight to creating beautiful, functional components. I use these techniques daily, and I’m confident they’ll elevate your TailwindCSS game as well.
1. Shorthands: Write Less, Do More
One of the easiest ways to streamline your workflow with TailwindCSS is by utilizing shorthand class names. Tailwind has a wide array of shorthands that allow you to apply styles with minimal code. Instead of writing long class names for every property, you can quickly apply common styles with concise utility classes. A good example for this is size replacing the use of w and h as shown below:
// Note: I am using JSX for the sake of the example, use class instead of className on HTML
// Inefficient use of classes ❌
<div className="w-16 h-16">{/* Enter your content here */}</div>
// Utilizing shorthands ✅
<div className="size-16">{/* Enter your content here */}</div>
Other good examples for shorthands are the p and m classes controlling the CSS padding and margin properties directly without explicitly using all of the directions (and changing all of them to the set value all at once).
2. Arbitrary Values? No Problems at All
TailwindCSS allows for the use of arbitrary values, which won't be checked after the build process of the CSS file. While this may sometimes introduce some CSS bugs and responsive design challenges, it allows for a more flexible set of rules and loosens up the strict use of the design system applied on the configuration file (tailwind.config.js or tailwind.config.ts if you're using TypeScript).
To use arbitrary values, you only need to put brackets before typing the value and close with another bracket like so:
// Works for sizes
<div className="w-[550px] h-[400px]"> {/* A unique custom size */} </div>
// Works on colors as well
<div className="bg-[#ff6347]"> {/* Custom color using hex code */} </div>
// Improper use of arbitrary values! The CSS rule won't apply ❌
// This applies a color to a width property in CSS, which is not going to do anything or change the style.
<div className="w-[#333]"></div>
3. Prose: Make Your Content Look Beautiful
Tailwind provides a built-in prose class that makes it easier to style content-heavy elements like articles, blog posts, or documentation. Instead of manually styling each element like paragraphs, headers, lists, and links, you can just apply the prose class to a container and get beautifully styled content right away. prose is perfect for CMS - generated content like blog articles, Markdown - based content and documentation platforms
For example:
// There are also custom classes that come with prose!
<div className="prose prose-sm md:prose-base lg:prose-xl dark:prose-invert prose-h1:font-extrabold">
<h1>My Blog Post</h1>
<p>This is an example of how to use the prose class to style content quickly.</p>
<ul>
<li>TailwindCSS is fast</li>
<li>It’s utility-first</li>
<li>It’s highly customizable</li>
</ul>
</div>
The prose class will automatically apply typography-related styles like font sizes, line heights, margins, and more. You can customize this further in your tailwind.config.js file if needed. To add the prose class name, make sure to install @tailwindcss/typography with your package manager of choice and require it in the plugins section.
npm install @tailwindcss/typography
4. Applying Your Design System
If you have a design system or branding guidelines that you follow, TailwindCSS makes it easy to apply your colors, fonts, spacing, and more consistently across your project. By customizing the tailwind.config.js file, you can define your design tokens and have them ready to use as utility classes throughout your app.
For example, you can define your custom colors like so:
module.exports = {
theme: {
extend: {
colors: {
primary: '#1D4ED8', // Blue
secondary: '#F59E0B', // Yellow
},
},
},
}
Then, you can use your custom colors in your components like this:
<div className="bg-primary text-white">Welcome to my website!</div>
This approach ensures that your design is consistent and you can easily update styles across the app without having to manually adjust colors and properties in multiple places. This is a popular methodology which many component libraries implement (and on a personal note, I really like it too).
5. Custom Plugins: Supercharge Your Workflow
TailwindCSS allows you to extend its capabilities by creating your own custom plugins. This is particularly useful when you find yourself repeating certain patterns or needing a utility class that Tailwind doesn’t provide out of the box.
Here's an example from one of my recent projects HanaTones, where I implemented a specific use case to create a high - contrast mode for accessibility purposes.
import plugin from 'tailwindcss/plugin';
module.exports = {
theme: {
// ...
},
plugins: [
plugin(function ({ addVariant }) {
// Define the custom variant
addVariant('high-contrast', ['.high-contrast &']);
})
]
}
By adding this custom plugin to tailwind.config.js, you'll have access to a new selector which you can handle for cases in which you need a high contrast mode. Although this use case is very specific, you can modify it and customize it for your own needs.
To sum this part up, custom plugins allow you to expand TailwindCSS’s functionality without bloating your CSS file, making them a powerful way to keep your workflow fast and flexible.
Conclusion
TailwindCSS is a fantastic utility-first CSS framework that can significantly speed up your development process. By leveraging shorthands, arbitrary values, prose, custom design systems, and custom plugins, you can streamline your workflow and focus more on building amazing user interfaces rather than getting bogged down in repetitive tasks.
Start applying these tips today, and you’ll soon find yourself building projects faster, with cleaner and more maintainable code. TailwindCSS is all about efficiency, and these tricks will help you unlock its full potential.
Happy coding (っ◕‿◕)っ
Top comments (0)