Tailwind Best Prictice

In this post, I am listing all initial setup for my tailwind configuration.

Extracting component classes

We can create an indigo button using tailwind's normal way like this:

<button class="py-2 px-2 bg-indigo-400 text-white font-semibold rounded-lg shadow-lg">
  Click
</button>

The output is a button like this:

If we know we have to reuse those button styles for few more times, copy the whole class into another button again and again is apprantly not a good idea. Extract those utility patterns to CSS conponent classes with tailwind's @apply directive is a proper way.

For doing so, wrapping custom component styles with the @layer components { ... } directive will add it to tailwind components. Adding those to components layer enables us to use utility classes to further style component.

/* tailwind or global css file */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
  .btn-blue {
    @apply py-2 px-2 bg-indigo-400 text-white font-semibold rounded-lg shadow-lg;
  }
}

Customize design system

We can customize all of the values of utility classes that tailwind generated in theme section of tailwind.config.js.

A full list of default config values of tailwind can be found in default twailwind config file generated by following command:

npx tailwind init tailwind-defaul.config.js --full