Bootstrapでは事前に準備されているボタン、メニュー、パンくずリストなどのコンポーネントは準備されておらず、utility classを使って独自のコンポーネントを作成し、デザインを行っていく。
その為、bootstrapよりオリジナリティの高いサイトを構築できる。
<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded">ボタン</button>
– 文字の大きさは9種類、色の数はかなりの数のutility classが準備されている。
### cdnを利用する場合
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
### npmを使用する場合
$ npm init -y
$ npm install tailwindcss
/css/style.css を作成
@tailwind base;
@tailwind components;
@tailwind utilities;
/public/css フォルダを作成
$ npx tailwind build ./css/style.css -o ./public/css/style.css
package.jsonにbuildコマンドを追加
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tailwind build css/style.css -o public/css/style.css"
},
/public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Hello Tailwind</h1>
</body>
</html>
<h1 class="text-4xl text-green-700 text-center font-semibold">Hello Tailwind</h1>
文字の大きさにはtext-xs, txt-sm, text-base … など10の値がある
文字の太さはfont-hairline, font-thin, font-light … など9つの値がある
色はtext-{色}-{色の濃さ}で設定を行う text-green-100, text-green-200 ..など濃さは9個設定できる
<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded">ボタン</button>
css/sytle.css
@tailwind base;
@tailwind components;
.btn {
@apply font-semibold text-white py-2 px-4 rounded;
}
@tailwind utilities;
$ npm run build
<div class="text-center mt-10">
<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded">ボタン</button>
<button class="bg-red-700 btn hover:bg-red-500">ボタン</button>
</div>
### 設定ファイルの追加
$ npx tailwind init
tailwind.config.js
module.exports = {
future: {
// removeDeprecatedGapUtilities: true,
// purgeLayersByDefault: true,
},
purge: [],
theme: {
extend: {
colors: {
cyan: '#9cdbff',
}
},
},
variants: {},
plugins: [],
}
$ npm run build
<button class="bg-cyan btn hover:bg-red-500 focus:outline-none focus:shadow-outline">ボタン</button>
なるほど、良く出来ている
