# 金魚腦的tailwindcss安裝指南 ###### tags: `Blog Post` `CSS` 2023/01/12 首先看官網安裝介紹 https://tailwindcss.com/docs/installation 基本上若有搭配框架使用開發app,例如Next.js 就請移駕至[Framework Guides](https://tailwindcss.com/docs/installation/framework-guides) 選擇搭配使用的Framework，參考安裝說明步驟進行。 在不搭配框架下進行開發的話，可以執行安裝命令: ``` npm install -D tailwindcss postcss autoprefixer ``` 目的是安裝 tailwindcss 及相關套件 postcss、autoprefixer 安裝完後在 devDependencies 可以見到。 接下來要產生個別套件的`config.js`檔案，執行: ``` npx tailwindcss init -p ``` 會產生`tailwindcss.config.js`和`postcss.config.js`兩個檔案 接著按照說明於`tailwindcss.config.js`補上 ``` content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ], ``` 並在要應用的主CSS文件中(例如`globals.css`)補上 ``` @tailwind base; @tailwind components; @tailwind utilities; ``` 之後就能在元素中使用上 tailwindcss 樣式，tailwindcss 召喚完成。 ## Next.JS常見tailwindcss問題 如前述說明，照理說在CSS文件引入 Tailwind 的程式碼應該是長這樣: ``` @tailwind base; @tailwind components; @tailwind utilities; ``` 但如果tailwindcss式樣套用不出來，可以改成這樣: ``` @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; ``` 參考: https://stackoverflow.com/questions/64032166/tailwindcss-not-working-with-next-js-what-is-wrong-with-the-configuration ## 其他問題 ### 重新安裝tailwindcss 在安裝的部分，若發生問題，可以重來不要客氣 完整移除tailwindcss和相關套件: ``` npm uninstall tailwindcss npm uninstall autoprefixer npm uninstall postcss ```