Tailwind Vanila HTML - DashingDigit001/WikiPage GitHub Wiki

使用情境: 當我們需要import我們建立的主題或自定義的tailwind css到現有的專案, 我們更傾向使用pure css, 因此我們要透過tailwind的postcss的工具將我們定義好的tailwind css給export出來。

以下用 shopify 專案示範

1. 建立資料夾test-tailwind

2. yarn init

3. yarn add -D tailwindcss autoprefixer postcss-cli

4. 建立dist/index.html

5. package.json加入 "scripts": { "build": "yarn tailwind -i styles.css -o assets/tailwind-styles.css",

   "serve": "yarn tailwind -i styles.css -o assets/tailwind-styles.css --watch",

   },

6. 根目錄建立styles.css @tailwind base; @tailwind components; @tailwind utilities;

7. yarn tailwind init

8. 修改 tailwind.config.js

   module.exports = {
     content: ["**/*.liquid"],
     prefix:"tw-",
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

9. assets 中的 tailwind-styles.css 即是產生出的結果

10. yarn build

11. 再將 build 出來的 css 檔案加入 html 中

觀念

• tailwind 3.0 內建 jit，purge 已經改名 -> content。

• tailwind.config 中的 content 是會掃描所有資料夾下的所有檔案，將有使用到的 tailwind class 轉換成 css。

• 如果 VS Code 的 extention 的 tailwind CSS IntelliSense 沒提示，可能是沒有 tailwind.config.js ，在根目錄下 yarn tailwind init，新增 tailwind.config.js。

• yarn tailwind -i styles.css -o dist/styles.css --watch ，即時更新已使用的 class 轉換成 CSS 不需要重複執行 yarn build