概要
試しました
nodejs だけ必要になります
環境
- macOS 15.7.3
- nodejs 22.15.1
- tailwindcss 4.1.18
インストール
- npm init -y
- npm install tailwindcss @tailwindcss/cli
インポート
- vim src/input.css
@import "tailwindcss";
CSS 生成
-
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./src/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
動作確認
- open index.html
最後に
これだけで「text-3xl」「font-bold」「underline」などのすでに tailwindcss に定義されているクラスを使えるようになります
Tailwind CSS はすでに定義されているクラスを組み合わせるだけで簡単にモダンなデザインができるという CSS フレームワークになります
基本は vite のプラグインとして使うようですが vite なしでも使えます
0 件のコメント:
コメントを投稿