如何在vue2中使用tailwind

本文主要是介绍如何在vue2中使用tailwind，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

查看官方文档，不要去看过时的文章！

使用官网推荐的第一个安装方法 Installation - Tailwind CSS

vue版本：2.6.10

1. 安装tailwind的包

npm install -D tailwindcss
npx tailwindcss init

2. tailwind.config.js 文件中的content是你需要使用tailwind的文件路径

/** @type {import('tailwindcss').Config} */
module.exports = {content: ["./src/views/**/*.vue"],theme: {extend: {colors: {grey: {default: '#999999'},yellow: {default: '#FF9A00',},},fontSize: {'small': ['12px'],}},},plugins: [],
}

3. 新建tailwind.css文件
 

@tailwind base;
@tailwind components;
@tailwind utilities;

4. 根据你的tailwind.css 文件生成output文件

npx tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/output.css --watch

5. 将output.css 文件引入你的main.js

这样就能在vue2中使用tailwind了。打包后是否生效还未测试（待更新）

注意事项：

1. 开发过程中需要开启监听命令，output文件会实时生成类名

2. 每次修改完tailwind.config.js，需要重启监听命令

这篇关于如何在vue2中使用tailwind的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---