首页 > 其他分享 >vue3如何正确设置 Tailwind CSS

vue3如何正确设置 Tailwind CSS

时间:2023-07-21 16:48:05浏览次数:33  
标签:src Tailwind js tailwind css vue3 CSS latest

1.创建vue3项目

npm init vue@latest

需要配置的选择YES

 2.切换到 项目newProject目录下  npm install 下载依赖包

 

3.安装 tailwind 及其依赖项(PostCSS 和自动前缀)

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

4.创建tailwind.config.js文件夹,postcss.config.js文件夹(可手动)

 

/** @type {import('tailwindcss').Config} */ module.exports = {   content: ["./index.html",'./src/**/*.{vue,js,ts,jsx,tsx}'],   theme: {     extend: {},   },   plugins: [], }

 

 

module.exports = {   plugins: [require("tailwindcss"), require("autoprefixer")], }; 5.在src目录下创建tailwind.css文件(文件名称可以更改,不一定要和我的一样)

 添加下面的代码

@tailwind base; @tailwind components; @tailwind utilities; 如果出现一下的问题 则需要修改vscode的setting.json文件,填加 "css.lint.unknownAtRules": "ignore" 然后保存即可

 

 6.最后一步,将src/tailwind.css引入到src/main.js下

 重新启动项目 即可

 

标签:src,Tailwind,js,tailwind,css,vue3,CSS,latest
From: https://www.cnblogs.com/goging/p/17571797.html

相关文章