在 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。

 

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。