Tailwind CSS 引用 (使用nuxt)

0. 評估運用

• 優點:

1. 不用再寫CSS 了 可以大量減少css碼，但相對的html會增加
2. 不須為命名苦惱
3. 訂製化程度高，可以增加自己喜歡的間距等

• 缺點:

1. 類名很長
2. 無法一次修改，除非用 @apply 創建其他類名 (ex: btn / alert )

1. 資源

tailwind
tailwindtoolbox
tailwind github
tailwindcomponents

2. VS code

Tailwind CSS Explorer 查找表
Tailwind CSS IntelliSense 提示字

3. 安裝

如果是用 nuxt 不要直接選 tailwind 因為它會安裝1.x 版本 (此版本的客製化擴充有缺少)
nuxtjs 安裝
npm install -D @nuxtjs/tailwindcss tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

3-1. 原先文件 tailwind.css / 設置文件

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

3-2. 配置文件 nuxt.config.js

$ npx tailwindcss init

  buildModules: [
    '@nuxtjs/tailwindcss'
  ],
  build: {
    extractCSS: true //SSR 模式下 會建議開啟分別載入
  }

3-3. 配置文件 tailwind.config.js

module.exports = {
  purge: [
    './components/**/*.{vue,js}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
  ],
  darkMode: false,
  theme: {
    fontFamily: {
      sans: ['Noto Sans TC', '微軟正黑體', 'sans-serif'] //改預設字體
      zcool: ['ZCOOL XiaoWei', 'sans-serif']
    },
    boxShadow: {
      // ....沒法用擴充方式新增如果要沿用得先載入
     'customer': '0 3px 6px 0 rgba(0, 0, 0, 0.2)',
    },
    screens: {
      sm: '640px',
      md: '992px',
      lg: '1200px',
      xl: '1460px',
    },
    spacing: {
       // ....沒法用擴充方式新增如果要沿用得先載入
      '40p': '40%',
      '75p': '75%',
      '100p': '100%',
      '120p': '120%',
      '136p': '136%',
    },
    extend:{ 
      // ....擴充
      margin: {
        '30':　'120px'
      },
      spacing: {
        'pb-40p': '40%'
      },
      colors: {
        customer:{
          primary: '#6A483E',
          secondary: '#EC964B',
          'light-primary' : '#B28F85',
          gray: '#F2F2F2',
          black: '#433D3B',
        }
      },
      backgroundImage: theme => ({
        'index-partner': "url('/image/index/3-01.jpg')",
        'index-investor-1': "url('/image/index/4-01.jpg')",
        'index-investor-2': "url('/image/index/4-02.jpg')",
        'index-investor-3': "url('/image/index/4-03.jpg')",
       }),
      height: {
        '600px': '600px',
        '400px': '400px',
        'full-72px': 'calc(100% - 72px)'
      },
      lineHeight: {
        '0': '0',
       },
      fontSize: {
        'pc-h1': ['45px','76.5px'],
        'pc-h2': ['30px','51px'],
        'pc-h3': ['28px','47px'],
        'pc-h4': ['20px','34px'],
        'pc-h5': ['14px','24px'],
        'pc-h6': ['12px','20px'],
        'pc-p': ['18px','30px'],
        'mb-h1': ['32px','54px'],
        'mb-h2': ['28px','47px'],
        'mb-h3': ['22px','37px'],
        'mb-h4': ['18px','30px'],
        'mb-h5': ['12px','20px'],
        'mb-h6': ['12px','20px'],
        'mb-p': ['16px','27px'],
      },
      zIndex: {
        '-1': '-1',
      },
      width: {
        '40': '160px',
        '50': '200px',
        '3col': 'calc((100% - 80px)/3)',
        '2col': 'calc((100% - 40px)/2)',
      }
    }
  },
  variants: {
    // 互動效果
    extend: {
      opacity: ['disabled'],
      pointerEvents: ['disabled'],
      backgroundColor: ['active','disabled'],
      padding: ['responsive', 'last','first'],
      margin: ['responsive', 'last','first'],
      maxHeight: ['focus'],
      divideColor: ['group-hover'],
      textColor: ['group-hover'],
    }
  }
}

3-4. 搭配 scss 引用

npm install --save-dev sass sass-loader@10 fibers
nuxt.config.js

  css: [
    { src: '@/assets/sass/all.scss', lang: 'scss' }
  ],

assets/sass/all.scss

@import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&display=swap');
// 引用字體
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
// tailwindcss延伸

.alert {
  @apply bg-red-500;
}

3-5. 引用外部字體

<p class="font-zcoo text-pc-p">引用不同字體</p>

4. 注意點

disable 禁用<--只能運用在 button 這種有禁用的物件上