【前端开发】前端使用Tailwind CSS写样式效率翻倍

vite+Vue项目配置教程

配置地址：https://tailwind.nodejs.cn/docs/guides/vite

中文文档：https://tailwind.nodejs.cn/docs/installation

说明：使用Tailwind CSS可省略写繁琐的css代码，通过用class快速布局，如下图页面全是class，很少会写css代码。

 例子：

创建variable.css文件，代码如下可定义样式变量：

:root {
    --color-G100: #FBFBFB;
    --color-G150: #F6F6F8;
    --color-G200: #F0F1F2;
    --color-G300: #E6E6E8;
    --color-G400: #D1D2D4;
    --color-G500: #B3B4B5;
    --color-G600: #9A9B9C;
    --color-G700: #7E7E80;
    --color-G800: #5B5B5C;
    --color-G900: #2D2D2E;
    --color-G1000: #000000;
    --color-CG100: #F8F9FB;
    --color-CG200: #F4F7F9;
    --color-CG300: #E4E9F0;
    --color-CG400: #CAD0D9;
    --color-CG500: #9FA7B3;
    --color-CG600: #707A87;
    --color-CG700: #505A69;
    --color-CG800: #3B4655;
    --color-CG900: #252D3B;
    --color-CG950: #151A26;
    --color-DP100: #FDF4F6;
    --color-DP200: #FAE5EC;
    --color-DP300: #F4C7D5;
    --color-DP400: #EA92AD;
    --color-DP500: #E05E86;
    --color-DP600: #B64C6D;
    --color-DP700: #963F59;
    --color-DP800: #652A3C;
    --color-DP900: #3E1A25;
    --color-DP950: #261017;
    --color-B300: #AECCFC;
    --color-B400: #6FA3F7;
    --color-B500: #3B82F6;
    --color-B600: #2562C4;
    --color-R500: #F2050D;
    --color-O500: #FF6C17;
    --color-Y100: #FEF6E5;
    --color-Y200: #FCE7BB;
    --color-Y500: #F5AB0B;
    --color-GN500: #0EB07B;
    --color-linear100: linear-gradient(180deg, #FCFCFC 0%, #F8F9FB 100%);
    --color-linear200: linear-gradient(180deg, #F8F9FA 0%, #F0F1F2 100%);
    --color-primary: var(--color-B500);
    --color-primary-hover: var(--color-B400);
    --color-primary-active: var(--color-B600);
    --color-primary-disable: var(--color-B300);
    --color-danger: var(--color-R500);
    --color-success: var(--color-GN500);
    --color-tip: var(--color-Y500);
    --color-warning: var(--color-O500);
    --color-link: var(--color-B600);
    --color-font: var(--color-G900);
    --color-light: var(--color-CG600);
    --color-lighter: var(--color-CG500);
    --color-disabled: var(--color-CG500);
    --color-border: var(--color-G300);
    --color-border-light: var(--color-G200);
    --color-button-border: var(--color-G400);
    --color-button-border-hover: var(--color-B500);
    --w-normal: 1440px;
    --w-sm: 1100px;
    --w-xs: 720px;
    --spacing-normal: 32px;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 22px;
    --border-radius: 3px;

    --devui-text: var(--color-font) !important;
    --devui-text-weak: var(--color-light) !important;
    --devui-disabled-text: var(--color-disabled) !important;
    --devui-border-radius: var(--border-radius) !important;
    --devui-btn-common-border-color: var(--color-button-border) !important;
    --devui-btn-common-border-color-hover: var(--color-button-border-hover) !important;
    --devui-success: var(--color-success) !important;
    --devui-danger: var(--color-danger) !important;
    --devui-warning: var(--color-danger) !important;
    --devui-primary: var(--color-primary) !important;
    --devui-line: var(--color-border) !important;
    --devui-form-control-line: var(--color-border-light) !important;
    --devui-area: unset !important;
    --devui-btn-padding: 0 16px !important;
    --devui-primary-hover:var(--color-primary-hover) !important;
    --devui-primary-active: var(--color-primary-active)!important;
    --devui-primary-disabled: var(--color-primary-disable)!important;
    --devui-form-control-line: var(--color-border) !important;
    --devui-dividing-line: var(--color-border-light) !important;
    --devui-border-radius-card: var(--border-radius) !important;
    --devui-aide-text: var(--color-G900) !important;
}

然后在tailwind.config.js文件做自定义配置，如下（使用如备注）：

/** @type {import('tailwindcss').Config} */
// eslint-disable-next-line no-undef
module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  // prefix: 'g-', // 类名前缀
  theme: {
    extend: {
      maxWidth: {
        'normal': 'var(--w-normal)', // 自定义类名 max-w-normal
        'sm': 'var(--w-sm)',
        'xs': 'var(--w-xs)'
      },
      minWidth: {
        'normal': 'var(--w-normal)', // 自定义类名 min-w-normal
        'sm': 'var(--w-sm)'
      },
      width: {
        'normal': 'var(--w-normal)', // 自定义类名 w-normal
        'sm': 'var(--w-sm)',
        'xs': 'var(--w-xs)'
      },
      colors: {
        'G100': 'var(--color-G100)', // text-G100 bg-G100 border-G100
        'G200': 'var(--color-G200)',
        'G300': 'var(--color-G300)',
        'G400': 'var(--color-G400)',
        'G500': 'var(--color-G500)',
        'G600': 'var(--color-G600)',
        'G700': 'var(--color-G700)',
        'G800': 'var(--color-G800)',
        'G900': 'var(--color-G900)',
        'G1000': 'var(--color-G1000)',
        'CG100': 'var(--color-CG100)',
        'CG200': 'var(--color-CG200)',
        'CG300': 'var(--color-CG300)',
        'CG400': 'var(--color-CG400)',
        'CG500': 'var(--color-CG500)',
        'CG600': 'var(--color-CG600)',
        'CG700': 'var(--color-CG700)',
        'CG800': 'var(--color-CG800)',
        'CG900': 'var(--color-CG900)',
        'CG950': 'var(--color-CG950)',
        'DP100': 'var(--color-DP100)',
        'DP200': 'var(--color-DP200)',
        'DP300': 'var(--color-DP300)',
        'DP400': 'var(--color-DP400)',
        'DP500': 'var(--color-DP500)',
        'DP600': 'var(--color-DP600)',
        'DP700': 'var(--color-DP700)',
        'DP800': 'var(--color-DP800)',
        'DP900': 'var(--color-DP900)',
        'Y100': 'var(--color-Y100)',
        'primary': 'var(--color-primary)',
        'link': 'var(--color-link)',
        'danger': 'var(--color-danger)',
        'success': 'var(--color-success)',
        'warning': 'var(--color-warning)',
        'tip': 'var(--color-tip)',
        'light': 'var(--color-light)',
        'lighter': 'var(--color-lighter)'
      },
      fontSize: {
        'xs': '12px', // text-xs
        'sm': '14px',
        'base': '16px',
        'lg': '18px',
        'xl': '20px',
        '2xl': '22px'
      },
      spacing: {
        'xs': '8px',
        '10': '10px', // mt-10
        '20': '20px',
        '24': '24px',
        '30': '30px',
        '32': '32px',
        '40': '40px',
        'normal': 'var(--spacing-normal)'
      }
    }
  },
  variants: {
    extend: {}
  },
  plugins: []
};