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
3. 等待安装后,输入命令初始化tailwind和postcss配置文件
npx tailwindcss init -p
4. 打开vue项目,在src目录下新建一个css文件:index.css,在文件中写入:
@tailwind base;
@tailwind components;
@tailwind utilities;
5. 在Main.js中引入index.css文件:
import './index.css'
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>
文章来源:https://www.toymoban.com/news/detail-650015.html
安装中遇到的问题:
Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8. Migratio文章来源地址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模板网!