TailwindCSS: Directive Driven Development

TailwindCSS is an extremely vast CSS framework, with a plethora of features for you to play around with and marvel at just how good your webpage can look. However, if you’re like me, you’ve been lazy with your usage. You’re just using common classes, the best combinations of which you found online, or you’ve just thrown together the minimum number of classes needed to make your page passable.

I’d like to break away from this and focus on the lesser-known TailwindCSS features that you need to be using. Namely, the TailwindCSS directives.

Directives

@tailwind

This is a very specific TailwindCSS directive, as it is used to insert Tailwind’s pre-made CSS classes into CSS files. If you have used TailwindCSS before, you should recognise the following lines from the top of your CSS file.:

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind screens;

These directives will add the Tailwind base classes, the Tailwind component classes, the Tailwind utility classes, and the responsive variations of the utility classes respectively.

TailwindCSS has many directives, and this one is the most basic
Examples of the @tailwind directive.

Most of the classes that you use to directly style your components are located in the utility directive, while the base and components directives import CSS that makes more general changes to the style of your page. In particular, the base directive mainly makes changes to the styles of HTML tags, rather than classes.

The screens directive simply inserts the responsive versions of all of the normal utilities, allowing you to shortcut certain classes to be only be active on certain screen sizes. If you omit the directive, however, Tailwind will simply insert these classes at the bottom of your CSS file (which may be preferred).

If you would like to have a look at the CSS these directives insert, have a look at the base.css file here, the components.css file here, and the utilities.css file here. There isn’t any screens.css file, as it is generated for your project by Tailwind.

@layer

The layer directive allows you to define a layer that the following CSS classes should fall into. The only valid layers are ‘base’, ‘components’, and ‘utilities’. So, you use this directive to explicitly state that you want some custom CSS you’ve written to be inserted into your CSS file at the position defined by the tailwind directive.

This is important when it comes to CSS specificity, which is the precedence of CSS rules if there are more than one in conflict. If two CSS classes with the same name are present in a file, the later class is the one that is preferred. Therefore, the position at which your CSS appears in your file is extremely important. Read more about CSS specificity here.

@apply

When using TailwindCSS, it is sometimes a bit tedious to have to input the same classnames over and over again when you need to repeated create some similar element, like a button for example. Thankfully, this directive is designed to mitigate this tedium.

The apply directive allows you to insert TailwindCSS classes into your own custom CSS classes. When you recognise that you are repeating classnames over and over again, you can create a new CSS class and simply apply those classnames to it. TailwindCSS will expand your apply statement into a CSS class that contains the contents of all of the classes you list.

The example given in the TailwindCSS docs is as follows.

.btn {
  @apply py-2 p-4;
}

expands to:

.btn {
  padding: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

This directive behaves like normal CSS does when compared to inline CSS that is written directly in HTML. It is a way to further extract your styles out into more convenient pieces.

Don't get tricked by the image of my mouse cursor in this image. Instead, focus on the @apply directive shown.
Examples of the @apply directive. Don’t get tricked by the cursor!

@variants

You use the variants directive to automatically generate variants of your own, custom CSS utility classes. For example, there may be a need to have a hover version of another class that you have written, so that some elements can transition to this class when hovered over. Instead of manually defining a new class, use this directive to generate a new one automatically with the TailwindCSS syntax.

@variants hover {
  .my-class {
    color: blue;
  }
}

will expand to:

.my-class {
  color: blue;
}

.hover:my-class {
  color: blue;
}

This will allow you the use of both classes in your HTML.

Other valid variants include ‘responsive’, ‘focus’, and ‘active’, though you can add you own variant names in the config file.

@responsive

The responsive directive is simply a shortcut for the equivalent variant directive call:

@variants responsive {
  /* Your CSS */
}

As above, TailwindCSS will generate a responsive variant of your CSS class for each media breakpoint, broken down in more detail here.

@screen

Similarly to above, the screen directive is for assigning your CSS classes to specific screen widths (media breakpoints, as above). It allows you to refer to media breakpoints that are defined in the config file by name, instead of writing a CSS media query to manually target specific screen sizes.

The TailwindCSS docs show that instead of writing this:

@media (min-width: 640px) {
  /* Your CSS */
}

you can write this:

@screen sm {
  /* Your CSS */
}

Which will keep all of your responsive design consistent.

Did you know that more than one directive could be used at once?
An example of the @screen directive, used in conjunction with the @apply directive.

More

If you would like to learn more about TailwindCSS directives, click here to go to the official TailwindCSS docs. The docs also have detail on every other facet of TailwindCSS, including reference material and examples.

About the author

Leave a Reply

Sign up to our newsletter.



We’d Love to talk about your next venture. Get in touch and we can start turning your idea into reality. Hope to hear from you soon!