傑森前端

tailwind安裝

(官網很清楚照著裝就對了)

3.x: https://tailwindcss.com/docs/installation

2.x: https://v2.tailwindcss.com/docs/installation

小整理

1. tailwindcss基於postcss外掛所以一定要設定postcss.config.js
2. npx tailwindcss init -p  -  產生postcss.config.js與tailwind.config.js
3. npx tailwindcss init tailwind-full.config.js --full （導出一個原始全部設定檔案可以拿來參考）

自定義CSS擴展

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自訂標籤  */
/* 寫在@layer裡面的才會觸發purge功能 */
@layer base { 
    body {
        @apply bg-gray-600
    }
}

/* 自訂元件  */
@layer components { 
      .card {
      	@apply w-100...
      }
}

/* 自訂工具 */
@layer utilities { 
      
}

設定相關

jit模式：https://v2.tailwindcss.com/docs/just-in-time-mode#variants-are-inserted-at-tailwind-variants

#tailwind.config.js
module.exports = {
  //2.1以上的版本，使用此模式數值可以使用w-[20px]自訂義大小，text-[#fff]自訂義顏色 
  //打包速度提升
  //偽元素支援
  //透明度支持bg-red-500/25(0.25的透明度)
  //可以支援:root的var使用要使用對應的前綴 text-[length:var(--bruce-title)] text-[color:var(--bruce-primary)]
  //增加了caret(輸入框聚焦時閃爍的顏色)
  //可以不用寫transform
  //邊框樣式支援
  //提供safeList
  mode: 'jit', 
  //打包配置設定
  purge: {    content: [ //只打包這些檔案中的tailwinds樣式 客製化與擴展需要寫在@layer裡面這個功能才會生效
      './public/*.html',
      './src/**/*.js',
    ],
    safelist: [ //不管有沒有用到都要打包進去不會被purge影響，用於可能在檔案裡面沒有是資料庫裡面存的css之類的狀況
      'bg-blue-500'
    ],
  },
  // 'media'(根據使用者瀏覽器系統自動開關夜間模式)
  // 'class'(使用者自己開啟) 在html上加上class="dark"基本上就是父元素要有.dark的css  
  // 使用:dark:bg-black(夜間模式這個css才有效)
  darkMode: 'media', 
  //utilities設定
  theme: {    
  	//客製化記得要寫在extend裡面 不然會覆蓋原有的設定 
    extend: {
      screens: {
        'test': '1000px'
      }
    }
  },
  //utilities狀態設定
  variants: { 
   //客製化記得要寫在extend裡面 不然會覆蓋原有的設定 
    extend: { 
      backgroundColor: ['active'], //css的狀態擴展 active:bg-gray-800
    },
  },
  //插件
  plugins: [ 
  	
  ], 

優化

1. tailwind.config.js添加purge
2. postcss安裝cssnano - https://cssnano.co/
3. gzip壓縮 webpack - https://www.webpackjs.com/plugins/compression-webpack-plugin/ vite - https://www.npmjs.com/package/vite-plugin-compression