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: [] };