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: []
};
标签：Tailwind,--,important,CSS,var,devui,border,前端开发,color From： https://www.cnblogs.com/xiaohuizhang/p/17762791.html