您现在的位置是:首页 >学无止境 >vue 使用 tailwindcss 3.0网站首页学无止境
vue 使用 tailwindcss 3.0
简介vue 使用 tailwindcss 3.0
推荐安装 tailwindcss 3.0
tailwindcss 官方地址
tailwindcss 3.0 安装流程
npm 安装
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
vue-cli webpack 4 升级到 webpack5
- 升级到最新版本
// 卸载全局cli
npm uninstall @vue/cli
// 安装全局cli
npm install -g @vue/cli
- 原本的项目依赖也需要升级
// 项目中执行
vue upgrade
-
升级到 webpack5 后,修改 vue.config.js 文件
1、hotOnly:true 修改成 hot: true,
2、jsonpFunction 修改成 chunkLoadingGlobal
tailwindcss 引入
- 创建 postcss.config.js 文件
-
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } }
-
- 创建 prettier.config.js 文件
-
module.exports = { plugins: [require('prettier-plugin-tailwindcss')] }
-
- 创建 tailwind.config.js 文件
-
/** tailwind.config.js 内容 */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], }
-
- 创建 tailwindcss.css 文件
-
@tailwind base; @tailwind components; @tailwind utilities;
-
- main.js 文件 引入 css 文件
-
import './styles/tailwindcss.css'
-
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。