要使用 tailwind css 设置 next.js，请按照以下步骤操作：
第 1 步：创建一个新的 next.js 项目
如果您尚未创建 next.js 项目，您可以使用 create-next-app 创建一个项目。
npx create-next-app@latest my-next-appcd my-next-app
第 2 步：安装 tailwind css
在 next.js 项目中，安装 tailwind css 及其所需的依赖项。
npm install -d tailwindcss postcss autoprefixer
第 3 步：初始化 tailwind css
通过生成 tailwind.config.js 和 postcss.config.js 文件来初始化 tailwind css。
npx tailwindcss init -p
这将在项目的根目录中创建 tailwind.config.js 和 postcss.config.js 文件。
步骤4：配置tailwind.config.js
将 tailwind.config.js 的内容替换为以下配置，即可在相关文件中启用 tailwind：
/** @type {import('tailwindcss').config} */module.exports = { content: [ './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', ], theme: { extend: {}, }, plugins: [],}
第 5 步：将 tailwind css 添加到您的 css 文件中
在您的项目中，打开或创建 ./styles/globals.css 文件并添加以下行以导入 tailwind 的基础、组件和实用程序：
如知AI笔记
如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型
27 查看详情
@tailwind base;@tailwind components;@tailwind utilities;
第 6 步：运行开发服务器
现在，启动开发服务器来查看 tailwind css 的运行情况：
npm run dev
您的 next.js 项目现在应该使用 tailwind css 设置。您可以在组件中使用 tailwind 实用程序类来设置它们的样式。
用法示例
这是在 next.js 页面 (pages/index.js) 中使用 tailwind css 的示例：
export default function Home() { return ( Welcome to Next.js with Tailwind CSS!
);}
通过此设置，您现在可以开始使用 tailwind 实用程序优先的 css 框架构建 next.js 应用程序！
立即学习“前端免费学习笔记（深入）”；
以上就是如何使用 Tailwind CSS 设置 os Nextjs的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/451418.html
微信扫一扫 
支付宝扫一扫 
