如何将tailwindcss添加到vite?
Posted
技术标签:
【中文标题】如何将tailwindcss添加到vite?【英文标题】:How do I add tailwindcss to vite? 【发布时间】:2020-09-08 23:54:00 【问题描述】:我正在使用 vite 0.16.6
并想将 vuepress 站点迁移到使用 vite。
但是我不确定如何配置 vite 以使用 tailwindcss。
在我的index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
#app
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
【问题讨论】:
【参考方案1】:经过一番挖掘,看起来我们必须在应用程序的根目录中包含一个postcss.config.js
module.exports =
plugins: [
// ...
require('tailwindcss'),
require('autoprefixer'),
// ...
]
【讨论】:
doc tailwindcss.com/docs/guides/vite 缺少这部分 =.=" 将postcss.config.js
放在应用程序根目录中是为我解决的问题。或者,您可以编辑您的 vite.config.js
以指定您的 postcss.config.js
文件的位置。 vitejs.dev/config/#css-postcss
我喜欢 2 年后这个答案仍然适用:D【参考方案2】:
yarn add tailwindcss @tailwindcss/typography @tailwindcss/ui -D
yarn tailwind init
注意:你可以使用 npm
crate 文件:postcss.config.js
并添加:
module.exports=
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
将 src/index.css 文件的内容替换为:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
【讨论】:
【参考方案3】:我写了一个vite的tailwind插件https://github.com/axe-me/vite-plugin-tailwind
它默认启用了 jit 编译器,它还有一个顺风配置查看器
【讨论】:
添加测试,建议给 Vue 社区,然后一旦包含在官方文档中,我会更新答案,在此之前,这是一个替代方案(带依赖选项)以上是关于如何将tailwindcss添加到vite?的主要内容,如果未能解决你的问题,请参考以下文章
如何将动态 TailwindCSS 类添加到 React 中的 DOM 元素
使用 TailwindCSS 时,如何避免模板在渲染列表时将分隔符添加到分隔符?
使用 flexbox (tailwindcss: flex-1) 如何将背景颜色添加到整个元素而不仅仅是文本?