tailwindcss引入项目的正确‘姿势’

安装

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
1

创建tailwindcss.config.js文件，该文件为tailwindcss的配置文件

①输入以下命令创建

npx tailwindcss init -p
1

②自己手动创建
该文件的默认内容如下：

// tailwindcss.config.js
module.exports = {
    content: [],
    theme: {
      extend: {},      
    },
    plugins: [],
}
1
2
3
4
5
6
7
8

需要添加 模板路径（tailwind的应用范围）

在tailwindcss.config.js文件中的content选项中，写入如下内容：

// tailwindcss.config.js
module.exports = {
    // tailwind 应用范围
    content: ['./index.html', './src/**/*.{vue,js}'],
    ...
}
1
2
3
4
5
6

需要添加一些 tailwind的指令

创建src/styles/index.scss文件，并写入如下代码：

//导入tailwind的基础指令组件
@tailwind base;
@tailwind components;
@tailwind utilities;
1
2
3
4

在src/main.js 中引入 index.scss

import './styles/index.scss'
1

因为使用到scss，所以需要安装sass

npm i -D sass@latest
1

在src/App.vue中img标签增加一个类名测试

1

查看项目 img背景变成红色，则表示成功。

题外话

使用tailwind的原因（tailwind火的原因）：

• 行内样式：无复用性，不合适！
• 组件样式：通用组件库，固定风格，不合适！
• 传统形式：响应式、主题替换等复杂功能实现复杂！
• 原子化css：最合适！！！