我要评论一、tailwindcss
1、先看官方文档：
2、先安装：npm install -d tailwindcss
---------------通过 npm 安装 tailwindcss，然后创建你自己的 create your tailwind.config.js 配置文件。
npm install -d tailwindcss
3、初始化文件—npx tailwindcss init
npx tailwindcss init
4、创建tailwindcss文件
在 assets 文件夹下创建 tailwendcss.css文件
@tailwind base; @tailwind components; @tailwind utilities;
5、在main.js中引入
import '@/assets/tailwindcss.css'
二、解决问题方案
1.使用px代替默认的rem单位
在tailwind.config.js文件中，将配置修改为以下内容
module.exports = {
purge: {
enabled: false,
content: ['./src/**/*.{js,jsx,ts,tsx}'],
},
content: [],
theme: {
spacing: array.from({ length: 1000 }).reduce((map, _, index) => {
map[index] = `${index}px`;
return map;
}, {}),
extend: {},
},
plugins: [],
};
2.vue2中由于版本问题 需要降低版本
由于最新的tailwind css使用post css 8版本，vue2框架暂时还不支持，所以需要指定安装postcss7的版本
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
3.vue2要在vue.config.js中配置
css: {
loaderoptions: {
postcss: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
},
},
标题然后重新运行即可—快来试试吧！
<div class="flex justify-center">flex居中</div> <div class="container mx-auto px-4">container mx-auto px-4</div>
到此这篇关于vue2中使用tailwindcss的详细教程的文章就介绍到这了,更多相关vue2中使用tailwindcss内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论