Functions & Directives

    Use the directive to insert Tailwind’s base, components, utilities and screens styles into your CSS.

    @apply

    Use @apply to inline any existing utility classes into your own custom CSS.

    This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.

    1. .btn {
    2.   @apply font-bold py-2 px-4 rounded;
    3. }
    4. .btn-blue {
    5.   @apply bg-blue-500 hover:bg-blue-700 text-white;
    6. }

    Note that classes are applied based on their location in your original CSS, not based on the order you list them after the @apply directive. This is to ensure that the behavior you get when extracting a list of classes with @apply matches how those classes behave when listed directly in your HTML.

    1. /* Input */
    2. .btn {
    3.   @apply py-2 p-4;
    4. }
    6. /* Output */
    7. .btn {
    8.   padding: 1rem;
    9.   padding-top: 0.5rem;
    10.   padding-bottom: 0.5rem;
    11. }

    If you want fine-grained control over the order in which classes are applied, use multiple @apply statements:

    1. /* Input */
    2. .btn {
    3.   @apply py-2;
    4.   @apply p-4;
    5. }
    7. /* Output */
    8. .btn {
    9.   padding-top: 0.5rem;
    10.   padding-bottom: 0.5rem;
    11.   padding: 1rem;
    12. }

    You can also mix @apply declarations with normal CSS declarations:

    1. /* Input */
    2. .btn {
    3.   transform: translateY(-1px);
    4.   @apply bg-black;
    5. }
    7. /* Output */
    8. .btn {
    9.   background-color: #000;
    10.   transform: translateY(-1px);
    11. }

    Any rules inlined with @apply will have !important removed by default to avoid specificity issues:

    1. /* Input */
    2. .foo {
    3.   color: blue !important;
    4. }
    6. .bar {
    7.   @apply foo;
    8. }
    10. /* Output */
    11. .foo {
    12.   color: blue !important;
    13. }
    15. .bar {
    16.   color: blue;
    17. }

    If you’d like to @apply an existing class and make it !important, simply add !important to the end of the declaration:

    1. /* Input */
    2. .btn {
    3.   @apply font-bold py-2 px-4 rounded !important;
    4. }
    6. /* Output */
    7.   font-weight: 700 !important;
    8.   padding-top: .5rem !important;
    9.   padding-bottom: .5rem !important;
    10.   padding-right: 1rem !important;
    11.   padding-left: 1rem !important;
    13. }

    Note that if you’re using Sass/SCSS, you’ll need to use Sass’ interpolation feature to get this to work:

    Use the @layer directive to tell Tailwind which “bucket” a set of custom styles belong to. Valid layers are a base, components, and utilities.

    1. @tailwind base;
    2. @tailwind components;
    3. @tailwind utilities;
    5. @layer base {
    6.   h1 {
    7.     @apply text-2xl;
    8.   }
    9.   h2 {
    10.     @apply text-xl;
    11.   }
    12. }
    14. @layer components {
    15.   .btn-blue {
    16.     @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
    17.   }
    18. }
    20. @layer utilities {
    21.   @variants hover, focus {
    22.     .filter-none {
    23.       filter: none;
    24.     }
    25.     .filter-grayscale {
    26.       filter: grayscale(100%);
    27.     }
    28.   }
    29. }

    Tailwind will automatically move any CSS within a @layer directive to the same place as the corresponding @tailwind rule, so you don’t have to worry as much about authoring your CSS in a specific order to avoid specificity issues.

    @variants

    You can generate responsive, hover, focus, active, and other variants of your own utilities by wrapping their definitions in the @variants directive.

    1. @variants focus, hover {
    2.   .rotate-0 {
    3.     transform: rotate(0deg);
    4.   }
    5.   .rotate-90 {
    6.     transform: rotate(90deg);
    7.   }
    8. }

    This will generate the following CSS:

    1. .rotate-0 {
    2.   transform: rotate(0deg);
    3. }
    4. .rotate-90 {
    5.   transform: rotate(90deg);
    6. }
    8. .focus\:rotate-0:focus {
    9.   transform: rotate(0deg);
    10. }
    11. .focus\:rotate-90:focus {
    12.   transform: rotate(90deg);
    13. }
    15. .hover\:rotate-0:hover {
    16.   transform: rotate(0deg);
    17. }
    18. .hover\:rotate-90:hover {
    19.   transform: rotate(90deg);
    20. }

    It’s important to note that variants are generated in the order you specify them.

    So if you want focus utilities to take priority over hover utilities for example, make sure focus comes after hover in the list:

    1. /* Input */
    2. @variants hover, focus {
    3.   .banana {
    4.     color: yellow;
    5.   }
    6. }
    8. .banana {
    9.   color: yellow;
    10. }
    11. .hover\:banana:hover {
    12.   color: yellow;
    14. .focus\:banana:focus {
    15.   color: yellow;
    16. }

    The @variants at-rule supports all of the values that are supported in the variants section of your config file, as well as any added through plugins.

    You can generate responsive variants of your own classes by wrapping their definitions in the @responsive directive:

    1. @responsive {
    2.   .bg-gradient-brand {
    3.     background-image: linear-gradient(blue, green);
    4.   }
    5. }

    This is a shortcut for writing out @variants responsive { ... } which works as well.

    Using the default breakpoints, this would generate these classes:

    1. .bg-gradient-brand {
    2.   background-image: linear-gradient(blue, green);
    3. }
    5. /* ... */
    7. @media (min-width: 640px) {
    8.   .sm\:bg-gradient-brand {
    9.     background-image: linear-gradient(blue, green);
    10.   }
    11.   /* ... */
    12. }
    14. @media  (min-width: 768px) {
    15.   .md\:bg-gradient-brand {
    16.     background-image: linear-gradient(blue, green);
    17.   }
    18.   /* ... */
    19. }
    21. @media (min-width: 1024px) {
    22.   .lg\:bg-gradient-brand {
    23.     background-image: linear-gradient(blue, green);
    24.   }
    25.   /* ... */
    26. }
    28. @media (min-width: 1280px) {
    29.   .xl\:bg-gradient-brand {
    30.     background-image: linear-gradient(blue, green);
    31.   }
    32.   /* ... */
    33. }

    The responsive variants will be added to Tailwind’s existing media queries at the end of your stylesheet. This makes sure that classes with a responsive prefix always defeat non-responsive classes that are targeting the same CSS property.

    @screen

    The @screen directive allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS.

    For example, say you have a sm breakpoint at 640px and you need to write some custom CSS that references this breakpoint.

    …you can use the @screen directive and reference the breakpoint by name:

    1. @screen sm {
    2.   /* ... */
    3. }

    The screen function accepts a screen name like md and generates the corresponding media feature expression:

    1. /* Input */
    2. @media screen(sm) {
    3.   /* ... */
    4. }
    6. /* Output */
    7. @media (min-width: 640px) {
    8.   /* ... */
    9. }

    This can be useful when you using Tailwind with other CSS tooling that handles the @screen directive poorly. For example postcss-nesting doesn’t understand @screen but understands @media, so using @media alongside the screen() function behaves more correctly.

    theme()

    Use the theme() function to access your Tailwind config values using dot notation.

    This can be a useful alternative to @apply when you want to reference a value from your theme configuration for only part of a declaration:

    1. .content-area {
    2.   height: calc(100vh - theme('spacing.12'));
    3. }

    If you need to access a value that contains a dot (like the 2.5 value in the spacing scale), you can use square bracket notation:

    1. .content-area {
    2.   height: calc(100vh - theme('spacing[2.5]'));
    3. }

    Since Tailwind uses a nested object syntax to define its default color palette, make sure to use dot notation to access the nested colors.

    Don’t use the dash syntax when accessing nested color values

    1. .btn-blue {
    2.   background-color: theme('colors.blue-500');
    3. }

    Functions & Directives - 图2Use dot notation to access nested color values

    1. .btn-blue {
    2.   background-color: theme('colors.blue.500');

     Configuration→