Custom Directives in Tailwind CSS

Tailwind CSS itself doesn’t use traditional CSS preprocessors’ directives like @mixin or @extend, but you can create custom utilities and components using Tailwind’s plugin API or extend its functionality with custom directives inside your CSS using the @layer and @apply rules.

1. Using @apply Directive

@apply lets you compose utility classes inside your own CSS rules or custom classes.

Example:

.btn-primary {  @apply bg-blue-600 text-white font-bold py-2 px-4 rounded hover:bg-blue-700;}

You can then use <button class="btn-primary">Click Me</button> instead of writing all those utility classes repeatedly.

2. Using @layer Directive

Tailwind 3+ supports the @layer directive to add your own CSS in the proper layer (base, components, or utilities).

Example - Adding a Custom Component:

@layer components {  .btn-primary {    @apply bg-blue-600 text-white font-bold py-2 px-4 rounded hover:bg-blue-700;  }}

This helps Tailwind know where to inject your CSS and maintain proper specificity and ordering.

3. Writing Custom Utilities with Plugins (Advanced)

You can create new utility classes via the Tailwind plugin API in tailwind.config.js:

const plugin = require('tailwindcss/plugin');module.exports = {  //...  plugins: [    plugin(function({ addUtilities }) {      const newUtilities = {        '.text-shadow': {          textShadow: '2px 2px #ff0000',        },        '.text-shadow-md': {          textShadow: '4px 4px #ff0000',        },      };      addUtilities(newUtilities, ['responsive', 'hover']);    }),  ],};

Then you can use these classes like:

<h1 class="text-shadow hover:text-shadow-md">Hello</h1>

Summary of Custom Directive Use Cases

If you want, I can help you create custom reusable components or utilities with these directives tailored to your project!