Tailwind CSS - Functions & Directives

---

Directives in Tailwind CSS are commands used in your CSS to apply or customize styles.

Directives are Tailwind CSS commands you use in your CSS to access special features and control the styling applied by Tailwind CSS.

@tailwind

The @tailwind directive allows you to include Tailwind's base styles, components, utilities, and variants directly into your CSS.

Example

/**
 * Inserts Tailwind's foundational styles and any additional base styles from plugins.
 */
@tailwind base;

/**
 * Includes Tailwind's component styles and any extra component styles from plugins.
 */
@tailwind components;

/**
 * Adds Tailwind's utility classes and any additional utility classes from plugins.
 */
@tailwind utilities;

/**
 * Controls the placement of variant styles (like hover, focus, and responsive) in your CSS.
 * If not specified, these variants are added at the end of your stylesheet by default.
 */
@tailwind variants;

@layer

The @layer directive lets you specify which category (base, components, or utilities) your custom styles should belong to in Tailwind.

Example

/**
 * Import Tailwind's base styles, component styles, and utility classes into your CSS.
 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/**
 * Define custom base styles for HTML elements using the base layer.
 */
@layer base {
  h1 {
    @apply font-bold text-3xl; /* Applies a bold font and large size to h1 elements */
  }
  h2 {
    @apply font-semibold text-2xl; /* Applies a semi-bold font and medium size to h2 elements */
  }
}

/**
 * Create custom component styles using the components layer.
 */
@layer components {
  .card {
    @apply bg-gray-100 border border-gray-300 p-4 rounded-lg shadow-md; /* Styles for a card component */
  }
}

/**
 * Add custom utility classes using the utilities layer.
 */
@layer utilities {
  .no-opacity {
    opacity: 1; /* Sets the element's opacity to fully opaque */
  }
  .blurred {
    filter: blur(5px); /* Applies a blur effect to elements */
  }
}

Tailwind automatically organizes CSS within @layer directives to match the order of @tailwind rules, so you don't need to worry about order to avoid specificity issues.

Custom CSS in these layers will only be included in the final build if used in your HTML, just like default Tailwind classes.

Additionally, using @layer lets you apply modifiers like hover, focus, and responsive breakpoints like like md: and lg: to your custom styles.

@apply

@apply allows you to include existing utility classes directly into your custom CSS.

This is helpful if you want to use Tailwind's styles while writing your own CSS, making it easier to customize or override styles from other sources.

Example

.custom-card {
    @apply rounded-lg shadow-lg;
}
.custom-input {
    @apply border border-gray-400 rounded-md;
}
.custom-header {
    @apply text-xl font-semibold text-gray-800;
  }

When you use @apply, any !important declarations are removed by default to prevent conflicts with other CSS rules. Here's how it works.

Example

/* Define a class with !important */
.text-red {
  color: red !important;
}

/* Apply the .text-red class to another class */
.alert {
  @apply text-red;
}

 
/* The .text-red class retains the !important declaration */
.text-red {
  color: red !important;
}

/* The .alert class does not include !important */
.alert {
  color: red;
}

If you want to use @apply to include styles from an existing class and ensure they are !important, you need to explicitly add !important to the end of each property in your custom CSS.

    /* The .card class without !important */
.card {
  padding: 1rem;
  background-color: #edf2f7;
  border: 1px solid #cbd5e0;
  border-radius: .375rem;
}

/* The .card-important class with !important */
.card-important {
  padding: 1rem !important;
  background-color: #edf2f7 !important;
  border: 1px solid #cbd5e0 !important;
  border-radius: .375rem !important;
}

To apply !important with @apply, add !important to each property. Sass/SCSS, include !important using this approach:

/* Apply !important using Sass variable */
.card-important {
    @apply p-4 bg-gray-200 border border-gray-400 rounded;
    @apply #{$important}; /* Applies !important */
}

Using @apply with per-component CSS

In frameworks like Vue and Svelte, you can include styles directly within a

In this example, .button is defined in main.css, but @apply inside Button.svelte doesn't work because each file is processed separately. Vue and Svelte handle their