在Vite 项目中使用 Tailwind CSS,你可以按照以下步骤进行配置和使用: 1. 安装 Tailwind CSS 到 Vite 项目中 首先,你需要在 Vite 项目中安装 Tailwind CSS 及其相关依赖。打开你的终端或命令行工具,导航到你的 Vite 项目目录,然后运行以下命令: bash npm install -D tailwindcss postcss autoprefixer 这些命令会...
1. 安装tailwindcss npm install -D tailwindcss postcss autoprefixer 2. 生成tailwindcss 配置文件 npx tailwind init -p 3. tailwind.config.js 配置 /** @type {import
配置index.css @tailwind base; @tailwind components; @tailwind utilities; # extra 内容 :root { --border-color: #c2c8d1; --primary-color: #13ce66 } /* pc 宽度大于1200px */ @media screen and (min-width: 1200px){ } /* 平板 小于1199 大于501px*/ @media screen and (max-width: 119...
8、运行npx tailwindcss init会在项目中生成一个tailwind.config.cjs文件。生成的文件需配置purge/content: []属性,值为空则样式不生效。当前版本为"tailwindcss": "^3.2.6" Tailwidcss文档:https://www.tailwindcss.cn/docs/ The`purge`/`content`options have changedinTailwindCSSv3.0. 完整配置如下: // ...
使用TailwindCSS 进行样式设计 安装TailwindCSS 要添加 TailwindCSS,运行以下命令: 代码语言:javascript 复制 npm install-Dtailwindcss postcss autoprefixer npx tailwindcss init-p 在Vite 中设置 TailwindCSS 在你的tailwind.config.js中,配置模板文件的路径: ...
其实本文中还可以添加 stylelint(有 Tailwind CSS 不再写大量组件 CSS,但还是可能写一部分)、React 状态管理方案等,但未写入,感兴趣的可自行添加最合适的。 1. 用 Vite 生成一个 React + TypeScript 项目 pnpm create vite my-react-app --template react-ts ...
tailwind.config.js的content: /** @type {import('tailwindcss').Config} */export default{content:['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}'], theme:{extend:{},},plugins:[],}; vite.config.js: importtailwindcssfrom'tailwindcss'importautoprefixerfrom'autoprefixer'...exportdefaul...
import './index.css' postcss.config.js配置不变 安装插件 PostCSS Language Support 智能提示安装:Tailwind CSS IntelliSense 所遇问题 ‘vite‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件 1、删除 node_modules 文件夹 和 package-lock.json 文件 ...
tailwind.config.js 需要修改content部分, /** @type {import('tailwindcss').Config} */export default{content:["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}"], theme:{extend:{},},plugins:[],} postcss.config.js export default{plugins:{tailwindcss:{}, ...
tailwind.config.js , content 添加了要热更新的目录文件,可以多行 /** @type {import('tailwindcss').Config} */module.exports = {content:["./**/*.html"],theme:{ extend: {}, },plugins:[], } 6: 创建 Tailwindcss 入口 css,并添加以下内容 例如:dist/css/index.css ...