Best Methods for Writing Better Code with Tailwind CSS

Writing Tailwind CSS? Here are some tips and tricks that I apply when using Tailwind CSS to make my code look and perform better.

Component-Based Approach

• Use: Break down your UI into reusable components and apply Tailwind classes within these components. This keeps your code DRY and improves maintainability.

const Button = ({ children }) => (
  <button className="bg-blue-500 text-white px-4 py-2 rounded">
    {children}
  </button>
);

Extracting Classes into Reusable Styles (Utility-First)

• Use: Extract commonly used class combinations into utility files or components. Tailwind's @apply directive allows you to define custom utility classes in CSS, so you can reuse them across your project.

.btn {
  @apply bg-blue-500 text-white px-4 py-2 rounded;
}

Leverage Tailwind Plugins

• Use: Tailwind plugins extend the functionality of the framework, adding useful utilities or components tailored to your project needs. For example, use @tailwindcss/typography for rich text formatting.

npm install @tailwindcss/typography

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

Use Tailwind JIT Mode (Just-In-Time)

• Use: Enable JIT mode to compile only the necessary styles on-demand, leading to faster builds and smaller CSS files. It’s a performance boost, especially for large projects.

// tailwind.config.js
module.exports = {
  mode: 'jit',
  // other configurations
};

Apply Conditional Classes with JavaScript/React

• Use: Dynamically apply Tailwind classes based on conditions or component state. This method allows you to toggle styles depending on the state of your application or user actions.