用户投稿Tailwind官方安装说明
1. 安装 TailwindCSS
npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p2. 编辑 tailwind.config.js
./tailwind.config.js
/** @type {import('tailwindcss').Config} */module.exports = { content: [ "./resources/**/*.blade.php", "./resources/**/*.js", "./resources/**/*.vue", ], theme: { extend: {}, }, plugins: [],}3. 编辑 app.css
./resources/css/app.css
@tailwind base;@tailwind components;@tailwind utilities;4. 在外层 .blade 中加入
例如 app.blade，加入 @vite('resources/css/app.css')
<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> @vite('resources/css/app.css')</head><body> <h1 class="text-3xl font-bold underline"> Hello world! </h1></body></html>5. 执行
执行 php artisan server 或是 octane 时都要同时执行 vite 才会使 tailwindCSS 即时生效
npm run dev6. 部署
npm run build
微信扫一扫打赏
支付宝扫一扫打赏
