Vue中使用Tailwind css-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue中使用Tailwind css。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.什么是Tailwind

就是一个CSS框架，和你知道的bootstrap，element ui，Antd，bulma。一样。将一些css样式封装好，用来加速我们开发的一个工具。
Tailwind解释

tailwind css 中文文档

注意⚠️

与预处理器一起使用

由于Tailwind是一个PostCSS插件，没有什么能阻止你将其与Sass，Less，Stylus或其他预处理器一起使用，就像使用其他PostCSS插件（如Autoprefixer）一样。

针对生产进行优化

一、对于尽可能小的生产版本，我们建议使用 cssnano 等工具缩小 CSS，并使用 Brotli 压缩 CSS。

二、如果您已将 Tailwind 安装为 PostCSS 插件，请添加到 cssnano 插件列表的末尾：

浏览器支持

一般来说，Tailwind CSS v3.0是为Chrome，Firefox，Edge和Safari的最新稳定版本而设计并经过测试的。它不支持任何版本的IE，包括IE 11。

2.Vue使用Tailwind配置

1. 新建vue项目

2. 在终端输入以下语句：

	npm install -D tailwindcss postcss autoprefixer

Vue中使用Tailwind css,javascript,前端,开发语言,vue.js

3. 等待安装后，输入命令初始化tailwind和postcss配置文件

npx tailwindcss init -p

Vue中使用Tailwind css,javascript,前端,开发语言,vue.js

4. 打开vue项目，在src目录下新建一个css文件：index.css，在文件中写入：

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

Vue中使用Tailwind css,javascript,前端,开发语言,vue.js

5. 在Main.js中引入index.css文件：

import './index.css'

Vue中使用Tailwind css,javascript,前端,开发语言,vue.js

6. 打开vue项目中刚刚配置新建的tailwind.config.js，更改配置Purge:[ ]，写入如下代码：

module.exports = {
  purge: [
    './index.html', 
    './src/**/*.{vue,js,ts,jsx,tsx}'  //包含了src文件夹下所有的vue,js等等文件
  ],
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

7. 在App.vue中输入如下代码测试是否配置成功，如图显示文字加大加粗即为配置成功：

<p class=" text-2xl font-bold">Hello Tailwind!</p>

Vue中使用Tailwind css,javascript,前端,开发语言,vue.js

安装中遇到的问题：

Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8. Migratio
Vue中使用Tailwind css,javascript,前端,开发语言,vue.js 文章来源地址https://www.toymoban.com/news/detail-650015.html

1、先删除已安装的npm包 yarn npm 按需选择

yarn remove tailwindcss postcss autoprefixer

npm uninstall tailwindcss postcss autoprefixer

2、再重新安装 yarn npm 按需选择

yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

到了这里，关于Vue中使用Tailwind css的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！