Get your next remote job on LaraJobs.

6 Tailwind CSS best practices, tips, and tricks for 2024

6 Tailwind CSS best practices, tips, and tricks for 2024

Introduction to Tailwind CSS best practices, tips, and tricks

Tailwind CSS is my go-to CSS framework since 2018. I didn’t use anything else since then, seriously!

Therefore, I think I’m in the right position to teach a thing or two to people who also fell in love with it.

Extend Tailwind CSS using the configuration file, not custom CSS

Tailwind CSS lets you customize a lot of things by simply editing the tailwind.config.js file.

For example, if you want to add a new color, you can extend the default theme to add your own set of values:

/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
brand: '#abc123',
},
 
fontFamily: {
handwriting: ['Some hanwriting font'],
}
}
}
}

By leveraging the configuration file properly, tons of classes and their variants will be automatically generated for you like bg-brand, text-brand, border-brand, hover:bg-brand, etc.

Learn more on the official documentation.

Use Visual Studio Code plugins to work more efficiently with Tailwind CSS

Tailwind CSS IntelliSense

Tailwind CSS IntelliSense is an official plugin made by Tailwind Labs that helps every developer work more efficiently with the framework by adding features like autocomplete, syntax highlighting, and linting.

A must-have!

Tailwind CSS IntelliSense on the Visual Studio Code marketplace.

Inline Fold

If you feel overwhelmed by the amount of classes in your HTML, you might want to collapse the class attribute for improved clarity.

Inline Fold is a plugin for Visual Studio Code that solves this problem really well.

Inline Fold on the Visual Studio Code marketplace.

Use line breaks

Let’s say you have a button that looks like this:

<button class="bg-gradient-to-r from-indigo-300 dark:from-indigo-500 to-indigo-400 dark:to-indigo-600 font-semibold px-4 sm:px-6 py-2 rounded shadow-lg text-sm text-white w-full">
Click me
</button>

One easy trick to make more readable is to break the class attribute to multiple lines:

<button
class="bg-gradient-to-r from-indigo-300 dark:from-indigo-500
to-indigo-400 dark:to-indigo-600 font-semibold px-4 sm:px-6
py-2 rounded shadow-lg text-sm text-white w-full"
>
Click me
</button>

Extract to a component

Extracting your button to a component (Blade, React, Vue, or whatever you like) will drastically clean up your files.

Here’s a Blade template file using a button component containing the same code as above:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 
<x-button>
Book me
</x-button>
 
</body>
</html>

Don’t extract to a parent class. Leverage editor and language features instead.

Extracting a bunch of Tailwind CSS classes to a parent class is tempting.

.btn {
@apply bg-gradient-to-r from-blue-400 to-blue-300 px-4 py-3 rounded
}

However, this completely defeats the purpose of Tailwind CSS, which is to have a single source of truth and make things easier to manage.

Instead, use your editor’s multi-cursor feature and create sub-components thanks to whatever templating engine you use.

Here’s an example written using Laravel’s Blade templating engine:

{{-- Somewhere in your views… --}}
<x-primary-btn>
Click me
</x-primary-btn>
 
{{-- primary-btn.blade.php --}}
<x-btn class="bg-gradient-to-r from-blue-400 to-blue-300 text-white">
{{ $slot }}
</x-btn>
 
{{-- btn.blade.php --}}
<button {{ $attributes->merge(['class' => 'bg-gray-200 px-4 py-3 rounded']) }}>
{{ $slot }}
</button>
  1. We begin with a base btn component with a gray rounded button that is enough for most cases.
  2. Then, we have a primary-btn component that extends the btn component and adds a blue gradient background and white text. This component can be used for call-to-action buttons.

2 comments

Daniel Weaver
Daniel Weaver 1mo ago

Nice Tailwind tips, but your last example could benefit from using Tailwind Merge: https://github.com/gehrisandro/tailwind-merge-laravel

Otherwise the classes passed to your blade component might not override the existing ones :)

Benjamin Crozat
Benjamin Crozat 1mo ago

This is great! I usually mark the class as important (!class-name) because I don't want to set up yet another tool, but comment are made for that! Thanks a lot!

Get help or share something of value with other readers!

Great deals for enterprise developers
The latest community links

Recommended articles

Tailwind CSS: the ultimate guide to get started

This is the most comprehensive tutorial about Tailwind CSS. Learn how to make front-end development great again.

Add Tailwind CSS to any Laravel project

See how easy it is to add Tailwind CSS to any Laravel project and start building an amazing user interface.

Tailwind CSS forms plugin: a step-by-step build guide

Discover how the Tailwind CSS forms plugin can reset your forms to a consistent state across all browsers and make styling easier.

20+ Laravel best practices, tips and tricks to use in 2024

Learning a framework can be overwhelming, but time and execution will make you a master. Here are some best practices to help you toward your goal.

Disable hover styles on mobile with Tailwind CSS

Learn how to disable hover styles on mobile devices with Tailwind CSS.

Laravel interview questions and answers for 2024

Nailing a Laravel job interview can be a daunting task, but with the right preparation and mindset, you can set yourself up for success.

How does Laravel work? A crystal clear explanation.

Discover my step by step and simple explanation of how Laravel makes your life easier.

3 crucial Laravel architecture best practices for 2024

Explore Laravel's default architecture to simplify collaboration, compatibility, and onboarding.

9 testing best practices for Laravel in 2024

Are you familiar with testing? Good. Here are a bunch of best practices to help you level up even more!

- / -