这里是官网的参考文档tailwindcss,有兴趣的可以自己去查看下,我下面将贴出我个人使用tailwindcss的教程,在这个过程中我使用的node.js的版本是16.14.2。
1.创建vue2项目(已经创建的可以自动跳过这步)
arduino
//这里app是你项目的名字,可更改
vue create app
运行后为下图界面,选择Default ([Vue 2] babel , eslint),等待创建完成
编辑
创建完成界面
编辑
2.项目初始化并启动项目
arduino
//运行npm install安装所需的包
npm install
//启动项目
npm run serve
此时项目成功启动,出现的画面如下
3.安装tailwindcss
kotlin
//直接运行下载
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
运行后界面如下编辑
在当前目录下,创建postcss.config.js文件,内部代码如下
css
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
在当前目录执行如下代码创建tailwind.config.js
csharp
npx tailwindcss init
创建成功后会出现下图文件
yaml
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
}
打开src下的main.js文件,增加如下代码
arduino
import "tailwindcss/tailwind.css";
此时重新运行项目有些事可以成功运行,可能也会报错,没关系,我们还需要增加以下一步,在vue.config.js文件中增加如下代码
css
//vue.config.js
css: {
loaderOptions: {
postcss: {
postcssOptions: {
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
}
}
}
}
进入设置中的插件,下载如下插件,并重启项目,插件能够让你在写class的时候自动联想,更加便于开发,
最终实现效果如下,我添加了class="bg-blue-600",文字对应的背景变成了蓝色,至此,项目结束