How not to write Tailwind

Introduction Tailwind CSS is a powerful utility-first framework that enables rapid UI development. However, many developers misuse it, leading to bloated HTML, poor maintainability, and unnecessary complexity. In this article, we'll explore the most common mistakes developers make when using Tailwind and how to avoid them. 1. Writing Messy & Bloated HTML Bad Example: Button Better Approach: Use @apply in CSS .btn { @apply bg-red-500 text-white p-4 rounded-lg shadow-lg text-lg font-bold border border-red-700; } Button Why? Keeps HTML cleaner and more readable. Makes styles reusable across multiple components. 2. Overusing Utility Classes Instead of Components Bad Example: Card Title This is a card description. Better Approach: Extract Components .card { @apply w-64 h-40 bg-gray-200 p-4 rounded-lg shadow-lg; } .card-title { @apply text-lg font-bold; } .card-desc { @apply text-gray-600; } Card Title This is a card description. Why? Reduces duplication. Makes modifications easier. 3. Not Using Tailwind’s Config for Customization Bad Example (Hardcoded Values in Classes): Custom Styled Box Better Approach: Use Tailwind’s theme.extend Edit tailwind.config.js: module.exports = { theme: { extend: { colors: { brandPrimary: '#ff5733', darkBg: '#121212', }, spacing: { '18': '4.5rem', }, }, }, }; Then use it in HTML: Custom Styled Box Why? Improves maintainability and consistency. Allows easy theme updates. 4. Ignoring Tailwind Plugins for Reusability Bad Example (Writing Custom CSS Instead of Using Plugins): .btn { background-color: #ff5733; padding: 10px 20px; border-radius: 5px; } Better Approach: Use Tailwind’s Official Plugins Install plugins: npm install @tailwindcss/forms @tailwindcss/typography Modify tailwind.config.js: module.exports = { plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')], }; Why? Reduces custom CSS. Uses optimized, pre-built styles. Conclusion By avoiding these common mistakes, you can write cleaner, more maintainable Tailwind CSS code. Focus on: ✅ Keeping HTML clean using @apply. ✅ Extracting reusable components. ✅ Leveraging Tailwind’s configuration. ✅ Using Tailwind’s built-in plugins. Writing Tailwind correctly ensures a scalable and efficient project. Happy coding!

Feb 26, 2025 - 03:58

Introduction

Tailwind CSS is a powerful utility-first framework that enables rapid UI development. However, many developers misuse it, leading to bloated HTML, poor maintainability, and unnecessary complexity. In this article, we'll explore the most common mistakes developers make when using Tailwind and how to avoid them.

1. Writing Messy & Bloated HTML

Bad Example:

 class="bg-red-500 text-white p-4 m-2 rounded-lg shadow-lg flex justify-center items-center text-lg font-bold border border-red-700">
    Button

Better Approach: Use `@apply` in CSS

.btn {
    @apply bg-red-500 text-white p-4 rounded-lg shadow-lg text-lg font-bold border border-red-700;
}

 class="btn">Button

Why?

Keeps HTML cleaner and more readable.
Makes styles reusable across multiple components.

2. Overusing Utility Classes Instead of Components

Bad Example:

 class="w-64 h-40 bg-gray-200 p-4 rounded-lg shadow-lg">
     class="text-lg font-bold">Card Title
     class="text-gray-600">This is a card description.

Better Approach: Extract Components

.card {
    @apply w-64 h-40 bg-gray-200 p-4 rounded-lg shadow-lg;
}
.card-title {
    @apply text-lg font-bold;
}
.card-desc {
    @apply text-gray-600;
}

 class="card">
     class="card-title">Card Title
     class="card-desc">This is a card description.

Why?

Reduces duplication.
Makes modifications easier.

3. Not Using Tailwind’s Config for Customization

Bad Example (Hardcoded Values in Classes):

 class="text-[#ff5733] bg-[#121212] p-[18px]">
    Custom Styled Box

Better Approach: Use Tailwind’s `theme.extend`

Edit tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        brandPrimary: '#ff5733',
        darkBg: '#121212',
      },
      spacing: {
        '18': '4.5rem',
      },
    },
  },
};

Then use it in HTML:

 class="text-brandPrimary bg-darkBg p-18">
    Custom Styled Box

Why?

Improves maintainability and consistency.
Allows easy theme updates.

4. Ignoring Tailwind Plugins for Reusability

Bad Example (Writing Custom CSS Instead of Using Plugins):

.btn {
    background-color: #ff5733;
    padding: 10px 20px;
    border-radius: 5px;
}

Better Approach: Use Tailwind’s Official Plugins

Install plugins:

npm install @tailwindcss/forms @tailwindcss/typography

Modify tailwind.config.js:

module.exports = {
  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};

Why?

Reduces custom CSS.
Uses optimized, pre-built styles.

Conclusion

By avoiding these common mistakes, you can write cleaner, more maintainable Tailwind CSS code. Focus on:
✅ Keeping HTML clean using @apply.
✅ Extracting reusable components.
✅ Leveraging Tailwind’s configuration.
✅ Using Tailwind’s built-in plugins.

Writing Tailwind correctly ensures a scalable and efficient project. Happy coding!