Custom Styling & Reusability

tailwindcss directives:

theme directive: Add elements to your theme.

@import "tailwindcss"

@theme {
  --color-chestnut: #973F29
}

base directive: Modify the base tailwind config.

@layer base {
  h1: {
      color: green;
  }
}

components directive: Style components.

@layer components {
  .card {
      background-color: green;
  }
}

utilities directive: Atomic styles for individual components.

@utility content-auto {
  content-visibility: auto;
}

<div class="content-auto"></div>

apply directive: Inserts tailwind css into regular css.

.select-dropdown {
  @apply rounded-b-lg shadow-md;
}