跳至主要内容

[tailwind] Tailwind CSS 環境建置與相關語法

擴充套件​

如果你是使用 VS Code 開發 Tailwind CSS 的話，強烈建議安裝 Tailwind CSS IntelliSense 套件，它會在你輸入 class 的時候，跳出 Tailwind CSS 相關語法的提示。

Image

初始化​

在一個空的資料夾底下執行以下指令來初始化專案：

npm init -y

接著安裝 Tailwind CSS 套件：

npm install -D tailwindcss

再安裝 Prettier:

npm install -D prettier prettier-plugin-tailwindcss

都安裝完以後，執行以下指令初始化 Tailwind：

npx tailwindcss init -p

編譯​

接著在根目錄新增兩個資料夾，分別為 public 和 src，並在 src 資料夾底下建立一個檔案，名為 styles.css，並將以下程式碼貼上：

src/styles.css
@tailwind base;@tailwind components;@tailwind utilities;

之後在 package.json 的 scripts 底下新增兩條指令：

package.json
{  "name": "tailwind-basic",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "start": "tailwindcss build src/styles.css -o public/styles.css",    "watch": "tailwindcss build src/styles.css -o public/styles.css --watch"  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {    "prettier": "^2.8.4",    "prettier-plugin-tailwindcss": "^0.2.5",    "tailwindcss": "^3.2.7"  }}

最後在 tailwind.config.js 檔案中，將 content 的內容更改為以下：

tailwind.config.js
/** @type {import('tailwindcss').Config} */module.exports = {  content: ["./public/*.html"],  theme: {    extend: {},  },  plugins: [],};

然後就可以輸入以下指令來將 Tailwind CSS 相關語法編譯並輸出到我們指定的資料夾 public 底下：

npm start

Image

如果不想要每次更改檔案就要重新執行 npm start 的話，可以改使用 npm run watch，來監聽檔案有無更動，有的話就自動編譯並輸出：

npm run watch

Live Server​

你也可以安裝 Live Server，來讓指定資料夾底下的檔案變更時自動重新整理：

npm install live-server -g

安裝成功後，執行以下指令來啟動 Live Server：

live-server public

Image

Extend​

如果想要客製化 CSS，可以在 tailwind.config.js 底下的 extend 新增：

tailwind.config.js
/** @type {import('tailwindcss').Config} */module.exports = {  content: ["./public/*.html"],  theme: {    extend: {      colors: {        primary: "#FF6363",        secondary: {          100: "#E2E2D5",          200: "#888883",        },      },    },  },  plugins: [],};

Image

Custom Fonts​

如果想要使用外部字體的話，先在 src/styles.css 底下， import 字體來源，這邊使用 Google Fonts 來展示：

src/styles.css
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400&display=swap");@tailwind base;@tailwind components;@tailwind utilities;

接著在 tailwind.config.js 的 extend 底下，新增 fontFamily，並將字體名稱新增進去：

tailwind.config.js
/** @type {import('tailwindcss').Config} */module.exports = {  content: ["./public/*.html"],  theme: {    extend: {      colors: {        primary: "#FF6363",        secondary: {          100: "#E2E2D5",          200: "#888883",        },      },      fontFamily: {        roboto: ["Roboto Condensed"],      },    },  },  plugins: [],};

如果你是使用 Google Fonts 的話，字體名稱會顯示在 CSS rules to specify families。

Image

要使用該字體的話，只要在 class 打上 font-字體名稱 即可：

Image

Media Query (RWD)​

Tailwind 預設的 Media Query 尺寸為以下：

tailwind.config.js
module.exports = {  theme: {    screens: {      sm: "640px",      // => @media (min-width: 640px) { ... }      md: "768px",      // => @media (min-width: 768px) { ... }      lg: "1024px",      // => @media (min-width: 1024px) { ... }      xl: "1280px",      // => @media (min-width: 1280px) { ... }      "2xl": "1536px",      // => @media (min-width: 1536px) { ... }    },  },};

如果需要自行更改的話只要在 tailwind.config.js 覆寫就好了：

tailwind.config.js
module.exports = {  theme: {    screens: {      sm: "576px",      // => @media (min-width: 576px) { ... }      md: "960px",      // => @media (min-width: 960px) { ... }      lg: "1440px",      // => @media (min-width: 1440px) { ... }    },  },};

使用的方式也很簡單，只要打上尺寸名稱加上要給予的 style 就好：

Image

@apply​

如果檔案中有重複的 class 需要使用，則可以將其提取出來，在 css 檔案中使用 @apply 語法，來重複利用：

src/styles.css
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400&display=swap");@tailwind base;@tailwind components;@tailwind utilities;.card {  @apply relative overflow-hidden rounded-lg bg-white shadow-lg;}.badge {  @apply absolute top-0 ml-2 mt-2 rounded-full bg-secondary-100 p-2 text-sm font-bold uppercase text-secondary-200;}

參考資料​

The Net Ninja