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