概要

ユーティリティファーストのCSSフレームワーク

ver	公開
3	xxxx/xx
4	2024/03

■Ver4 「tailwind.config.js」は不要に。 改善点: https://zenn.dev/miz_dev/articles/tailwind-css-v4

導入（Laravel）

# Node.js 関連
dnf module enable nodejs:20
dnf install nodejs

# インストール
npm install tailwindcss @tailwindcss/vite

resources/css/app.css

@import "tailwindcss";
@source "../views";

package.json

// 省略
    "devDependencies": {
        "autoprefixer": "^10.4.20",
        "axios": "^1.7.4",
        "concurrently": "^9.0.1",
        "laravel-vite-plugin": "^1.2.0",
        "vite": "^6.0.11"
    },
    "dependencies": {
        "@tailwindcss/vite": "^4.0.7",
        "tailwindcss": "^4.0.7"
    }
// 省略

■ビルド

npm run build

ユーティリティクラス

■ボタン https://flowbite.com/docs/components/buttons/

■余白
mt-[n]: margin-top: n*4px;