Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup without ever leaving your HTML.
Stop wasting time struggling to invent unique class names like .sidebar-inner-wrapper or managing cascading conflicts in huge CSS files.
Since you style elements directly using utility classes, you don't have to constantly switch context between your HTML/JSX structure and your CSS stylesheet.
Tailwind automatically scans your files during build time and dumps any CSS classes you didn't actually type, resulting in incredibly small production CSS files!
1<!doctype html>
2<html>
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <script src="https://cdn.tailwindcss.com"></script>
7</head>
8<body>
9 <h1 class="text-3xl font-bold underline text-blue-500">
10 Hello world!
11 </h1>
12</body>
13</html>1npm install -D tailwindcss
2npx tailwindcss init1/** @type {import('tailwindcss').Config} */
2module.exports = {
3 content: ["./src/**/*.{html,js}"],
4 theme: {
5 extend: {},
6 },
7 plugins: [],
8}1@tailwind base;
2@tailwind components;
3@tailwind utilities;Tailwind has arguably some of the greatest, most interactive documentation in the entire developer industry. While this cheatsheet covers the massive majority of the commonly used utility classes, you should absolutely search the main site for complex responsive adjustments or component animations.