跳到主要内容

如何在你的 Next.js 应用程序中安装 Tailwind CSS

Tailwind CSS 是一个实用优先的 CSS 框架，与 Next.js 完全兼容。本指南将指导你如何在 Next.js 应用程序中安装 Tailwind CSS。

安装 Tailwind​

安装必要的 Tailwind CSS 包：

Terminal
npm install -D tailwindcss @tailwindcss/postcss postcss

提示：如果你使用 create-next-app CLI 创建项目，Next.js 会提示你是否要安装 Tailwind 并自动配置项目。

配置 Tailwind​

在项目根目录创建 postcss.config.mjs 文件，并将 @tailwindcss/postcss 插件添加到你的 PostCSS 配置中：

postcss.config.mjs
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

从 Tailwind v4 开始，默认情况下不需要任何配置。如果你确实需要配置 Tailwind，可以按照官方文档来配置全局 CSS 文件。

如果你有现有的 Tailwind v3 项目，还有升级 CLI 和指南。

导入样式​

将 Tailwind CSS 指令添加到应用程序的全局样式表中，Tailwind 将使用这些指令来注入其生成的样式，例如：

app/globals.css
@import 'tailwindcss';

在根布局（app/layout.tsx）中，导入 globals.css 样式表以将样式应用到应用程序中的每个路由。

app/layout.tsx
import type { Metadata } from 'next'

// 这些样式应用于应用程序中的每个路由
import './globals.css'

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

使用类​

安装 Tailwind CSS 并添加全局样式后，你可以在应用程序中使用 Tailwind 的实用类。

app/page.tsx
export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

导入样式​

将 Tailwind CSS 指令添加到你的应用程序中，Tailwind 将使用这些指令来注入其生成的样式。

在 pages/_app.tsx 中导入 Tailwind CSS：

pages/_app.tsx
import type { AppProps } from 'next/app'
import '../styles/globals.css'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

在 styles/globals.css 中添加 Tailwind 指令：

styles/globals.css
@import 'tailwindcss';

使用类​

安装 Tailwind CSS 并添加样式后，你可以在应用程序中使用 Tailwind 的实用类。

pages/index.tsx
export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

自定义配置​

如果你需要自定义 Tailwind 配置，可以创建 tailwind.config.js 文件：

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        background: 'var(--background)',
        foreground: 'var(--foreground)',
      },
    },
  },
  plugins: [],
}

示例​

以下是一个使用 Tailwind CSS 的简单组件示例：

app/components/Button.tsx
interface ButtonProps {
  children: React.ReactNode
  variant?: 'primary' | 'secondary'
  size?: 'sm' | 'md' | 'lg'
}

export default function Button({ 
  children, 
  variant = 'primary', 
  size = 'md' 
}: ButtonProps) {
  const baseClasses = 'font-medium rounded-lg transition-colors'
  
  const variantClasses = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
  }
  
  const sizeClasses = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg',
  }

  return (
    <button
      className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]}`}
    >
      {children}
    </button>
  )
}

下一步​

最后于 更新