Nuxt Tailwind
为 Nuxt 启用 Tailwind CSS ⚡️
功能
- 👌 零配置即可启动
- 🪄 通过 postcss-nesting 支持 CSS 嵌套
- 🎨 探索您的 Tailwind 配置与颜色 (观看视频)
- ⚙️ 在应用中引用您的 Tailwind 配置
- 📦 可通过 Nuxt 模块利用 hooks 进行扩展
- 🚀 同时支持 Nuxt 3 和 Nuxt 2
快速设置
使用 Nuxt CLI 将 @nuxtjs/tailwindcss 添加到您的项目中
npx nuxi@latest module add tailwindcss
..或者使用您的包管理器进行安装
# Using pnpm
pnpm add --save-dev @nuxtjs/tailwindcss
# Using yarn
yarn add --dev @nuxtjs/tailwindcss
# Using npm
npm install --save-dev @nuxtjs/tailwindcss
然后将其添加到 nuxt.config.{ts,js} 的 modules 部分
export default defineNuxtConfig({
modules: [
'@nuxtjs/tailwindcss'
]
})
搞定！现在您可以在 Nuxt 应用中使用 Tailwind 类名了 ✨
贡献
您可以在线为该模块做出贡献
..或者在本地进行
- 克隆此仓库
- 使用
pnpm i安装依赖 - 使用
pnpm dev:prepare准备开发环境 - 使用
pnpm dev启动开发服务器
文档
您可以使用 pnpm docs:dev 在本地运行 docs/，或者运行构建
- 在构建应用前，请确保在
.env文件中添加您的 Nuxt UI Pro 许可证。 - 使用
pnpm docs:build运行 SSG 构建 - 使用
pnpm docs:preview在本地检查生产构建版本
查看 部署文档 以获取更多信息。
许可证
MIT - 由 💚 制作