Tailwind CSS 在Vue中的使用

什么是Tailwind CSS？

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，支持 hover 和 focus 样式，它们能直接在脚本标记语言中组合起来，构建出任何设计。

是否需要Tailwind Css

Tailwind Css 它是一个高度可定制化的低级 CSS 框架。对我们日常使用Vue或React开发来说，是一个有益的补充。比如常用的margin、padding、text-align以及hover样式的定义可以直接使用，当然不止于这些，还有更多快捷和高级用法，有兴趣的可以查看【官方文档】

如何引入

1、通过 npm 安装 Tailwind

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

2、创建配置文件

npx tailwindcss init -p
这将会在您的工程根目录创建 tailwind.config.js 和 postcss.config.js 两个配置文件

// tailwind.config.js
module.exports = {
    
    
  prefix: 'tw-', // 前缀
  content: ['./src/**/*.vue'],
  theme: {
    
    
    extend: {
    
    },
    textColor: {
    
    
      danger: '#ff5733'
    }
  },  
  plugins: []
};

可以在【配置文档】中查看详细参数设置

作为 PostCSS 插件来添加 Tailwind

// postcss.config.js
module.exports = {
    
    
  plugins: {
    
    
    tailwindcss: {
    
    },
    autoprefixer: {
    
    }
  }
};

3、包含 Tailwind 到CSS 中

如果您尚未创建一个 CSS 文件，请使用 @tailwind 指令注入 Tailwind 的基础 (base)，组件 (components) 和功能 (utilities) 样式：

/* /src/style/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

4、在你的main.js文件中导入新创建的tailwind.css文件:

// main.js
import './style/tailwind.css'

在项目中使用

运行项目服务 ，在应用程序中使用 Tailwind Css
示例：

<button class="bg-red-500 hover:bg-blue-700 w-60 text-lg leading-6 px-4 py-4 hover:tw-bg-light-blue-400">Hover me</button>

效果如下：

hover效果：

样式解析：

总结

• Tailwind CSS 体积小不会对我们现有环境产生副作用，
• 可以作为我们日常开发一个有利补充，提高前端开发样式灵活性
• 统一的规范也可以让团队协作保持一致性