📝
TailwindCSSを使ってみる
概要
TailwindCSSを学び始めたので、まとめていこうと思います。
(学習記録です。)
公式
TailwindCSSとは
CSSフレームワーク。
HTMLファイル内でCSSを記述するため、クラス名を考えなくても良い。
前提
Node.jsがインストール済み
yarnがインストール済み
開発環境構築
-
TailwindCSSのインストール
npm install -D tailwindcss
-
セットアップ
npx tailwindcss init
-
TailwindCSSの設定ファイルを編集
vi tailwind.config.js
↓
module.exports = {
content: ["./src/**/*.{html,js}"], // この部分
theme: {
extend: {},
},
plugins: [],
}
- CSSファイルにTailwindCSSを導入
vi src/input.css
↓
@tailwind base;
@tailwind components;
@tailwind utilities;
- ビルド
npm init -y
vi package.json
↓
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
}
}
npm run build
TailwindCSSを実行する
vi src/index.html
↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TailwindCSS</title>
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-base font-bold underline">
Hello world!
</h1>
</body>
</html>
VSCodeでプラグインを追加する
Tailwind CSS IntelliSense
Discussion