tailwind使用教程以及tailwind不生效的问题

以Vite项目为例

我们先安装依赖文件生成文件

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

配置tailwind.config.js文件

/** @type {import('tailwindcss').Config} */
export default {content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme: {extend: {},},plugins: [],
}

css配置

css引入 并在main中引入此文件
@tailwind base;
@tailwind components;
@tailwind utilities;

安装插件

tailwind不生效的问题

npx tailwindcss init -p 需要生成的两个文件
一个是tailwind.config.js文件
一个是postcss.config.js ←这个我之前执行并没给我生成
重新执行 npx tailwindcss init -p或者手动创建文件postcss.config.js即可

//postcss.config.js
export default {plugins: {tailwindcss: {},autoprefixer: {},},
}

文件改动重新启动项目即可

还有一点它默认单位是rem 不过我们可以在tailwind.config.js自定义配置一下

/** @type {import('tailwindcss').Config} */
module.exports = {content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],theme: {// 用于覆盖tailwindcss的默认配置colors: {white: 'var(--color-white)',primary: {DEFAULT: 'var(--el-color-primary)','light-3': 'var(--el-color-primary-light-3)','light-5': 'var(--el-color-primary-light-5)','light-7': 'var(--el-color-primary-light-7)','light-8': 'var(--el-color-primary-light-8)','light-9': 'var(--el-color-primary-light-9)','dark-2': 'var(--el-color-primary-dark-2)'},success: 'var(--el-color-success)',warning: 'var(--el-color-warning)',danger: 'var(--el-color-danger)',error: 'var(--el-color-error)',info: 'var(--el-color-info)',body: 'var(--el-bg-color)',page: 'var(--el-bg-color-page)','tx-primary': 'var(--el-text-color-primary)','tx-regular': 'var(--el-text-color-regular)','tx-secondary': 'var(--el-text-color-secondary)','tx-placeholder': 'var(--el-text-color-placeholder)','tx-disabled': 'var(--el-text-color-disabled)',br: 'var(--el-border-color)','br-light': 'var(--el-border-color-light)','br-extra-light': 'var(--el-border-color-extra-light)','br-dark': 'var( --el-border-color-dark)',fill: 'var(--el-fill-color)','fill-light': 'var(--el-fill-color-light)','fill-lighter': 'var(--el-fill-color-lighter)',mask: 'var(--el-mask-color)'},fontFamily: {sans: ['PingFang SC', 'Arial', 'Hiragino Sans GB', 'Microsoft YaHei', 'sans-serif']},boxShadow: {DEFAULT: 'var(--el-box-shadow)',light: 'var(--el-box-shadow-light)',lighter: 'var(--el-box-shadow-lighter)',dark: 'var(--el-box-shadow-dark)'},fontSize: {xs: 'var(--el-font-size-extra-small)',sm: 'var( --el-font-size-small)',base: 'var( --el-font-size-base)',lg: 'var( --el-font-size-medium)',xl: 'var( --el-font-size-large)','2xl': 'var( --el-font-size-extra-large)','3xl': '20px','4xl': '24px','5xl': '28px','6xl': '30px','7xl': '36px','8xl': '48px','9xl': '60px'},spacing: {px: '1px',0: '0px',0.5: '2px',1: '4px',1.5: '6px',2: '8px',2.5: '10px',3: '12px',3.5: '14px',4: '16px',5: '20px',6: '24px',7: '28px',8: '32px',9: '36px',10: '40px',11: '44px',12: '48px',14: '56px',16: '64px',20: '80px',24: '96px',28: '112px',32: '128px',36: '144px',40: '160px',44: '176px',48: '192px',52: '208px',56: '224px',60: '240px',64: '256px',72: '288px',80: '320px',96: '384px'},lineHeight: {none: '1',tight: '1.25',snug: '1.375',normal: '1.5',relaxed: '1.625',loose: '2',3: '12px',4: '16px',5: '20px',6: '24px',7: '28px',8: '32px',9: '36px',10: '40px'}},plugins: [// require('@tailwindcss/line-clamp') // 引入插件]
}