Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides a set of low-level utility classes to build designs directly in your markup. It’s a highly customizable and efficient way to create modern, responsive user interfaces.

Setup

To use TailwindCSS include this in your documents header:

<script src="https://cdn.tailwindcss.com"></script>

Modifiers

You can modify when a utility class will become active by using mod: before the class name.

Some modifiers include:

• hover
• focus
• active
• disabled
• invalid
• first
• last
• even
• odd

This modifier is used for dark mode:

• dark

These modifers are used for device orientation:

• landscape
• portrait

These modifers are used for responsive design and reresent their respective screen sizes when a class will become active:

• sm
• md
• lg
• xl
• 2xl

For a list of all classes see the documentation.