# tailwind 筆記 ###### tags: `tailwind`,`css` ### (應用相關的筆記看[這裡](https://hackmd.io/nNYl6Mv7RRy-rHmMTpjUOw)) --- ## 安裝與設定 https://tailwindcss.com/docs/installation ### CDN ```htmlembedded= <script src="https://cdn.tailwindcss.com"></script> ``` ### CLI 需先安裝 [node.js](https://nodejs.org/) 新增一空白資料夾,cmd輸入以下指令 ```haskell= $ npm init ``` 接下來會跳一堆問題,直接全部enter就好 安裝tailwindcss ```haskell= $ npm install -D tailwindcss ``` 輸入這行會產生tailwind.config.js ```haskell= $ npx tailwindcss init ``` 修改tailwind.config.js 路徑可視需求修改, 以下方路徑為例, 位於 src/html/的html跟js檔都會被監控. ```javascript= /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], } ``` 手動新增src/input.css ```css! @tailwind base; @tailwind components; @tailwind utilities; ``` 修改package.json ```json! ... "scripts": { "build": "tailwindcss -i ./src/input.css -o ./dist/output.css", "watch": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch" }, .... ``` 輸入這行可監控html的變更: ``` $ npm run watch ``` 輸入這行可編譯tailwind,輸出至dist/output.css: ``` $ npm run build ``` ## tailwind.css.config ### 用@apply將多個tailwind css屬性包一起 ``` @tailwind base; @tailwind components; @tailwind utilities; @layer components { .custom_name { @apply before:absolute before:w-0 before:bg-gray-400 before:h-1 before:bottom-0 before:left-1/2 before:hover:w-full before:hover:left-0 before:transition-all before:duration-200 } } ``` ## css屬性運用 ### calc ```htmlembedded! <div class="w-[calc(100%/3)]"></div> ``` ## 動畫 ### 自訂動畫 https://blog.logrocket.com/creating-custom-animations-tailwind-css/