目次
Tailwind CSSとは
BootstrapのようなCSSフレームワーク。
Bootstrapとは異なり細かいデザインを作成することができるので、最近はBootstrapではなくTailwind CSSを使用するケースが多い。
Tailwind CSSの公式サイトのトップページの作成を見ればどのようなコードでデザインを作成できるかわかる。
Tailwind CSSの使用方法
Tailwind CSSを使いやすくするために、まず作業環境を用意する。
今回はParcelを使用した例で説明する。
まず、適当なフォルダを作成してpackage.jsonを作成する。
mkdir my-tailwind; cd my-tailwind; npm init -y
次にParcel、Tailwind CSSをインストールする。
npm i -D parcel tailwindcss
Parcelインストール後は実行しやすいようにpackage.jsonを以下のように修正。
{
"name": "my-tailwind",
"source": "src/index.html",
"browserslist": "> 1%, last 2 versions, not dead",
"scripts": {
"start": "parcel --open",
"build": "rm -r ./dist/; parcel build"
},
"devDependencies": {
"parcel": "latest",
"tailwindcss": "latest"
}
}
次に「npx tailwindcss init」でtailwind.config.jsを生成してcontentにhtmlファイルのパスを入れる。
(v2だとcontentではなくpurgeです)
npx tailwindcss init
// tailwind.config.js
module.exports = {
content: [
'./src/**/*.html'
],
theme: {
extend: {},
},
plugins: [],
}
.postcssrcも必要なので以下の内容で作成。
{
plugins: {
tailwindcss: {},
autoprefixer: {
"grid": true
}
}
}
tailwind.config.jsを作成したらsrcフォルダを作成してhtmlとcssファイルを作成する。
mkdir src; touch src/index.html; touch src/style.css
htmlとcssの中身は以下の通りにする。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Hello world!</title>
</head>
<body>
<h1 class="text-red-500">Hello world!</h1>
</body>
</html>
@tailwind base;
@tailwind components;
@tailwind utilities;
HTMLファイル内の「text-red-500」はTailwind CSSのclass。
以上の手順が完了している状態でnpm startを実行すればブラウザにWebページが表示されてHello world!が赤くなっているのが確認できる。
npm run buildを実行すればhtmlとcssファイルが書き出される。
$ npm run build > build > rm -r ./dist/; parcel build ✨ Built in 4.96s dist/index.html 224 B 355ms dist/index.661305e0.css 3.8 KB 890ms
VS Codeは拡張機能をインストール
VS CodeでTailwind CSSを使用する場合は拡張機能のインストールが推奨されている。
この2つがインストールされていないと効率的にコーディングできないので必ず入れたほうが良い。
PostCSS Language Support - Visual Studio Marketplace
Tailwind CSS IntelliSense - Visual Studio Marketplace
CDNもあるが絶対に使用してはいけない
Tailwind CSSにはCDNもあるがBootstrapのように使用してはいけない。
Tailwind CSSのCDNは約3MBもあるので、これを読み込むとページの読み込みに時間がかかってしまう。
https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css
purgeのパス指定なしで実行してはいけない
Tailwind CSSはpurgeでclassが使用されているパスを指定することで、使用しないCSSは含めないようにすることができる。
逆に言うとこのパス指定が間違っている、あるいは設定されていないとTailwind CSSのすべてを読み込んでしまうのため、ファイルサイズが約3MBになってしまう。
$ npm run build > build > rm -r ./dist/; parcel build console: console: warn - Tailwind is not purging unused styles because no template paths have been provided. console: warn - If you have manually configured PurgeCSS outside of Tailwind or are deliberately not removing unused styles, set `purge: false` in your Tailwind config file to silence this warning. console: warn - https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css ✨ Built in 15.81s dist/index.html 224 B 355ms dist/index.e988d6b1.css ⚠️ 3.06 MB 9.21s
v2でJust-in-Time Modeを使用していない
Tailwind CSS v2.1からJust-in-Time Modeという新しいモードが導入されている。
tailwind.config.jsでmode: "jit", を追記して有効にすると新しいコンパイラが使用可能となりビルド時間が速くなる。
v3の場合はデフォルトでJust-in-Timeが有効なので設定不要。
// tailwind.config.js
module.exports = {
mode: "jit",
purge: [
'./src/**/*.html'
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
また、class名を組み合わさせて「sm:hover:active:disabled:opacity-75」のように指定したり、背景色などを「bg-[#123456]」のように指定して自由に設定できるようになる。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Hello world!</title>
</head>
<body class="bg-[#123456]">
<h1 class="text-green-500">Hello world!</h1>
</body>
</html>
Just-in-Time Mode - Tailwind CSS
