43 lines
No EOL
1,018 B
Markdown
43 lines
No EOL
1,018 B
Markdown
---
|
|
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). |