TailwindCSS的使用

TailwindCSS的使用

安装必要的依赖

pnpm install --save-dev tailwindcss postcss autoprefixer

设定TailwindCSS配置

执行TailwindCSS的初始化命令：

npx tailwindcss init -p

1. 生成 postcss.config.js 文件，以整合TailwindCSS插件，确保您的样式得到适当处理。
2. 创建 tailwind.config.js 以指定扫描模式、主题配置和插件整合。

为确保TailwindCSS在打包过程中编译相关样式，必须在 tailwind.config.js 中适当配置 content 字段。例如，扫描 src 目录下所有以 .vue, .js, .ts, .jsx 或 .tsx 结尾的文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
    
       
	content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],   
	theme: {
    
         
		extend: {
    
    },   
	},   
	plugins: []
}

引入Tailwind

1. 创建 tailwind.css 文件：

/* 整合 Tailwind 指令 */
@tailwind base;
@tailwind components;
@tailwind utilities;

1. 在 main.ts 中引入：

import "@/style/tailwind.css"

使用Tailwind配置之外的变量：

官方文档参考 - Tailwind CSS

在某些场景中，可能需要使用不在Tailwind配置中的特定值：

<div class="w-[139px] h-[77px] bg-[#165DFF]"></div>

优势:

1. 开发人员可以保持一致的工作流，无需在HTML和CSS之间切换。
2. 单一的类定义只生成一个样式规则，即使多次使用，也可以优化最终的CSS输出。

注意: 虽然这样做很方便，但频繁使用“魔法值”可能会偏离设计的一致性。过度依赖可能使未来的维护变得复杂。

创建自定义类

使用 @apply 指令：

.menu {
    
    
	@apply p-2 text-gray-900 font-semibold;
}

.menu-item {
    
    
	@apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900;
}

注意事项:

1. 虽然 @apply 指令可以模块化样式，但避免早期抽象是好的。过度使用可能会增加最终CSS文件的大小。
2. 推荐优先使用内置的Tailwind工具和迭代流程，而不是自定义类。

使用Tailwind进行响应式设计

响应式设计 - Tailwind CSS

示例：

<div class="w-32 h-32 bg-green-500 md:bg-blue-500" />

此代码表示：默认显示为绿色，但在宽度至少为768px（md断点）的屏幕上显示为蓝色。

覆盖Tailwind的默认配置

配置:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    
    
  theme: {
    
    
    extend: {
    
    
      textColor: {
    
     
        primary: '#1D2129',
        regular: '#4E5969',
        secondary: '#86909C',
        disabled: '#C9CDD4',
      }
    },
  },
  // 更多配置...
}

应用：

<span class="text-primary">主色调</span>
<span class="text-regular">标准色</span>
<span class="text-secondary">次色调</span>
<span class="text-disabled">禁用色</span>

暗黑模式整合

暗黑模式 - Tailwind CSS

在 tailwind.config.js 中配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
    
    
  darkMode: 'class',
  // 其他配置...
}

应用方法：

<div class="w-32 h-32 bg-blue-500 dark:bg-green-500"></div>

注意事项：

TailwindCSS与antd design vue之间的潜在冲突：

例如，在整合TailwindCSS后，antd design vue 的按钮可能会变得透明。

解决方案: 禁用TailwindCSS的默认属性：

// tailwind.config.js
module.exports = {
    
    
  // 其他配置...
  corePlugins: {
    
    
    preflight: false
  }
}