TailWindCss

tailwindcss 中一个非常核心的内容就是： 每一个类名都代表了一个 css 属性 ，这个样式在 tailwindcss 中被称作为 原子化 CSS.

添加到项目

  1. 在项目中执行以下命令：
npm install -D tailwindcss@3.0.23 postcss@8.4.8 autoprefixer@10.4.2
npx tailwindcss init -p
  1. 生成了tailwind.config.js配置文件，添加配置文件中content内容：
module.exports = {
  // Tailwind 应用范围
  content: ['./index.html', './src/**/*.{vue,js}'],
	...
}

  1. 安装``scss`，执行命令:

    npm i -D sass@1.45.0

  2. 在src中创建style文件夹，然后在该文件夹中创建index.scss，写入：

// 导入 tailwind 的基础指令组件
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. 在src/main.js中引入该index.scss，就可以在项目中使用tailwind啦。