クローンして、"npm install"して、"npm run dev" or "npm run build" する
クローンはせずに下記のドキュメント通りに進めてもOK
専用フォルダ(ディレクトリ)を作ってプロジェクトとする
# ディレクトリ作成
mkdir tailwind_test
# プロジェクトとし、中に入る
cd tailwind_test
<!DOCTYPE html>
<html lang="ja" data-theme="valentine">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- dist.css に Tailwind も入っている -->
<link rel="stylesheet" href="dist.css">
<title>Tailwind CSS Test</title>
</head>
<body>
<!-- コンテナ -->
<div class="container mx-auto mb-10 pt-10">
<!-- 見出し -->
<h1 class="text-base sp:text-lg tb:text-2xl pc:text-4xl mb-10">Tailwind CSS Test</h1>
<!-- ボタン -->
<button class="btn">Button</button>
<button class="btn btn-neutral">Neutral</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-secondary">Button</button>
<button class="btn btn-accent">Button</button>
<button class="btn btn-ghost">Button</button>
<button class="btn btn-link">Button</button>
<!-- 水平線 -->
<div class="divider">Divider</div>
<!-- モーダル -->
<button class="btn btn-secondary" onclick="my_modal_1.showModal()">open modal</button>
<dialog id="my_modal_1" class="modal">
<form method="dialog" class="modal-box">
<h3 class="font-bold text-lg">Hello!</h3>
<p class="py-4">Press ESC key or click the button below to close</p>
<div class="modal-action">
<button class="btn">Close</button>
</div>
</form>
</dialog>
</div>
<!-- コンテナ -->
<div class="container mx-auto">
<!-- フォントサイズ -->
<p class="text-sm ...">The quick brown fox ...</p>
<p class="text-base ...">The quick brown fox ...</p>
<p class="text-lg ...">The quick brown fox ...</p>
<p class="text-xl ...">The quick brown fox ...</p>
<p class="text-2xl ...">The quick brown fox ...</p>
</div>
<!-- フッター -->
<footer class="mt-10">
© Tailwind Test.
</footer>
</body>
</html>
Tailwind 用の CSS ファイルとして input.css を作る
/* Tailwind用 */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* 下記はオリジナル */
/* フッターを最下部固定にするために */
html , body {
height : 100% ;
}
footer {
position : sticky; /* フッターを最下部固定にするために */
top : 100% ; /* フッターを最下部固定にするために */
background-color : skyblue;
font-size : 1.3rem ;
color : white;
padding : 1rem 0 ;
text-align : center;
}
Tailwind と autoprefixer をインストールする
Tailwindは、CSSフレームワーク
autoprefixerは、自動でベンダープレフィックスをつけるプラグイン
# インストール
npm install -D tailwindcss postcss autoprefixer
# tailwind.config.js を生成する
npx tailwindcss init
Bootstrap っぽくなる daisyUI をインストールする
tailwind.config.js をテスト用に編集する
/** @type {import(' tailwindcss' ).Config} * /
module.exports = {
// 監視対象
content: [
" ./index.html"
],
// ミニファイ対象
purge: [
" ./index.html"
],
theme: {
// デフォルト値の継承と上書き
extend: {
// ブレークポイントのデフォルト値
// screens: {
// sm: " 640px" ,
// md: " 768px" ,
// lg: " 1024px" ,
// xl: " 1280px" ,
// ' 2xl' : " 1536px"
// }
},
// 新規ブレークポイント、デフォルトは効かなくなる
screens: {
sp: " 400px" ,
tb: " 768px" ,
pc: " 1280px" ,
},
},
plugins: [
// テーマのdaisyUI読込
require(" daisyui" ),
function({addComponents}) {
addComponents({
// コンテナサイズのデフォルト値
// " .container" : {
// maxWidth: " 100%" ,
// " @screen sm" : {
// maxWidth: " 640px" ,
// },
// " @screen md" : {
// maxWidth: " 768px" ,
// },
// " @screen lg" : {
// maxWidth: " 1024px" ,
// },
// " @screen xl" : {
// maxWidth: " 1280px" ,
// },
// " @screen 2xl" : {
// maxWidth: " 1536px" ,
// },
// }
// 新規コンテナサイズ
" .container" : {
maxWidth: " 95%" ,
" @screen sp" : {
maxWidth: " 80%" ,
},
" @screen tb" : {
maxWidth: " 768px" ,
},
" @screen pc" : {
maxWidth: " 1200px"
}
}
})
},
],
daisyui: {
// 使用テーマ
themes: [" light" , " dark" , " cupcake" , " retro" , " valentine" ],
// ユーザー環境がダークモードのときのテーマ指定
darkTheme: " retro" ,
},
}
プラグイン設定ファイルの post.config.js を作る
post.config.js を生成する
post.config.js を編集する
module.exports = (ctx) => ({
map: ctx.options.map,
plugins: {
tailwindcss: {},
autoprefixer: {},
},
});
{
"devDependencies": {
"autoprefixer": "^10.4.14",
"cssnano": "^6.0.1",
"daisyui": "^3.1.5",
"postcss": "^8.4.24",
"tailwindcss": "^3.3.2"
+ },
+ "scripts": {
+ "dev": "tailwindcss -i input.css -o dist.css --watch",
+ "build": "tailwindcss -i input.css -o dist.css --minify"
+ }
}
リアルタイムコンパイルを実行する
ビルドしてCSSミニファイをしながら確立させてもよい