1. npm create vite@latest my-project -- --template vue 创建基础项目 2. npm install -D tailwindcss postcss autoprefixer 这里如果这么安装 应该是tailwind 版本原因 会导致下一步报错 所以我建议 tailwind 安装固定版本@3.4 3.npx tailwindcss init -p 创建配置文件 4. tailwind.config.js 中 /** @typ...
可以看到样式并没有编译出来。 经过各种探讨,参考vue2配置的tailwind,发现有人需要单独在vue.config.js加一个配置 // vue.config.jsmodule.exports= {css: {loaderOptions: {postcss: {plugins: [require('tailwindcss'),require('autoprefixer')] } } } } 抱着试试看的态度,在vite.config.js加上对应配置 ...
vue3 可以直接安装post 最新版本 npminstalltailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7autoprefixer@^9 2、生成配置文件 可以运行npx,也可以自己新建 在终端中输入代码:npx tailwindcss init生成一个空的配置文件。【用这个】 也可以生成一个包含所有默认配置的配置文件:n...
1、安装TailwindCSS npm install tailwindcss 2、新建 tailwind.css,在 src/assets 新建 css 文件夹,并新建 tailwind.css,并添加内容 @tailwind base; @tailwind components; @tailwind utilities; 3、修改 main.js 引入 import "./assets/css/tailwind.css" 4、 创建 Tailwind 配置文件 npx tailwind init --ful...
module.exports = { purge: [],theme: { extend: {},},variants: {},plugins: [],} 4、⽤ tailwind 处理 css 项⽬中使⽤的 webpack，所以是在 webpack 中的 postcss-loader 中配置。Vue CLI2.x 中这样配置：module.exports = { // ...module: { rules: [{ // ...use: [// ...
1. tailwind.config.js 配置 module.exports={// JIT 模式配置mode:'jit',// 内容路径配置content:["./src/**/*.{html,js,jsx,ts,tsx,vue}","./public/**/*.html",],// 主题配置theme:{// 扩展现有主题extend:{colors:{'custom-blue':'#1947E5',},spacing:{'128':'32rem',}},// 自定义...
在vue中配置 首先需要安装,注意版本。因为tailwindcss 2.x需要postcss8,当前vue cli中postcss版本还是7。 npm i tailwindcss@1.9.6 -D 然后需要配置postcss.config.js,这里我试验了很多次,才找到同时配置tailwindcss,purgecss,pxtorem的,purgecss也是一个很有用的插件,后面再说。
env.NODE_ENV === 'production', content: ['./src/**/*.vue'], }, ... } 4. 预设 Presets 默认情况下,预设本身会扩展 TailwindCss 的默认配置。 团队间开发应当保持统一性,可以定义一份 tailwind.config.preset.js 作为团队的预设配置。由于业务差异性,或者一些历史因素,导致某些项不得不做一些更改,...
二、项目实践(Vue3.3 + TypeScript + TailwindCSS) 2.1、安装 TailwindCSS pnpm add tailwindcss 2.2、创建配置文件 / tailwind.config.js 2.2.1、创建tailwind.config.js 该文件用于配置 TailwindCSS npx tailwindcss init 2.2.2、tailwind.config.js 文件内容 ...
运行以下命令生成默认的 Tailwind 配置文件: 这将在项目根目录下生成一个tailwind.config.js文件。 5.3 配置 CSS 文件 在项目中创建一个 CSS 文件(通常命名为styles.css或tailwind.css),并在文件中引入 Tailwind CSS: 5.4 配置 如果你使用 Vue CLI 创建的项目,需要确保在postcss.config.js文件中引入 Tailwind CSS...