knowledge/technology/dev/TailwindCSS.md

---
obj: concept
website: https://tailwindcss.com
---

# 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:
```html
<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](https://tailwindcss.com/docs).