Tailwind — это CSS-фреймворк, ориентированный на утилиты.
В этой статье описано, как установить Tailwind.
Содержание
Установите
npm i --save-dev tailwindcss
Инициализировать
npx tailwindcss init
Настройка
// tailwind.config.js
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};
Запись
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Построить
npx tailwindcss build -i ./src/index.css -o ./dist/index.css
Использование Tailwind на странице
<!-- src/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/dist/index.css" rel="stylesheet" />
</head>
<body>
<p class="underline">Hello</p>
</body>
</html>
Проверить
serve .
http://localhost:3000/src/index.html
Поддержка Visual Studio Code
// .vscode/extensions.json
{
"recommendations": ["bradlc.vscode-tailwindcss"]
}