在 Laravel 安裝 tailwindcss

tailwindcss 是近年流行的 CSS 框架，如果要在 Laravel 上使用的話可以依據以下步驟：

1. 開啟終端機並移動到專案資料夾

cd my-project

2. 安裝 tailwind CSS 

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

3. 設定 Laravel Mix

在 webpack.mix.js 設定 tailwindcss plugin

mix.js("resources/js/app.js", "public/js")
  .postCss("resources/css/app.css", "public/css", [    
    require("tailwindcss"),  
]);

4. 設定 tailwind.config.js

module.exports = {  
  content: [    
    "./resources/**/*.blade.php",   
     "./resources/**/*.js",    
    "./resources/**/*.vue",  ], 
   theme: {    
    extend: {}, 
   },  
  plugins: [],
}

5. 在 app.css 檔連結 tailwindcss

檔案在 /resources/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

6. 在樣板上連結 app.css

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

7. 執行 npm run watch

執行 npm run watch 後就可以即時預覽 css，在編輯完成後要使用 npm run prod 產出 css。