Установка
Tailwind CSS работает путем сканирования всех ваших HTML-файлов, JavaScript-компонентов и любых других шаблонов на наличие классов, генерации соответствующих стилей и последующей записи их в статический CSS-файл.
Он быстрый, гибкий и надежный — без необходимости использования runtime.
Используйте Play CDN, чтобы попробовать Tailwind прямо в браузере без какого-либо этапа сборки. Play CDN предназначен только для целей разработки и не предназначен для производства.
Добавьте тег скрипта Play CDN в <head> вашего HTML-файла и начните использовать классы утилиты Tailwind для стилизации вашего контента.
<!doctype html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body></html>Используйте type="text/tailwindcss" для добавления пользовательского CSS, который поддерживает все функции Tailwind CSS.
<!doctype html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <style type="text/tailwindcss"> @theme { --color-clifford: #da373d; } </style> </head> <body> <h1 class="text-3xl font-bold underline text-clifford"> Hello world! </h1> </body></html>