如何在Next.js项目中结合使用Stitches与Tailwind CSS？

完全可以在Next.js项目中同时使用Stitches和Tailwind CSS，二者并非互斥，反而能形成互补：Tailwind擅长快速搭建通用布局和原子类样式，适合原型开发与简单组件；Stitches则在组件级样式、主题系统、变体逻辑、SSR支持上更具优势，适合复杂自定义组件的开发。

配置步骤 #

1. 安装依赖 #

首先在Next.js项目中安装所需包：

npm install @stitches/react tailwindcss postcss autoprefixer

初始化Tailwind配置文件：

npx tailwindcss init -p

2. 配置Tailwind #

修改tailwind.config.js，指定需要扫描的文件路径，确保Tailwind能正确生成样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 引入Tailwind全局样式 #

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

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 可在此添加全局重置或自定义基础样式，Stitches会基于此环境工作 */

4. 配置Stitches #

创建stitches.config.ts（或.js）文件，定义主题、断点等配置，建议与Tailwind的设计系统对齐（比如断点、颜色），避免样式混乱：

import { createStitches } from '@stitches/react';

export const {
  styled,
  css,
  globalCss,
  keyframes,
  getCssText,
  theme,
  createTheme,
  config,
} = createStitches({
  theme: {
    colors: {
      // 可复用Tailwind颜色值，或自定义
      primary: '#3b82f6',
      secondary: '#6b7280',
    },
    fonts: {
      sans: 'Inter, system-ui, sans-serif',
    },
  },
  media: {
    // 与Tailwind断点保持一致
    sm: '(min-width: 640px)',
    md: '(min-width: 768px)',
    lg: '(min-width: 1024px)',
  },
});

5. 配置Next.js SSR支持 #

在pages/_document.tsx中注入Stitches的样式，确保服务端渲染时样式正常加载：

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { getCssText } from '../stitches.config';

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <style
            id="stitches"
            dangerouslySetInnerHTML={{ __html: getCssText() }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

最佳实践与使用场景 #

• Tailwind 适用场景：快速布局、通用原子类样式（如flex、p-4、text-center）、原型开发、简单UI元素。
• Stitches 适用场景：复杂组件的变体逻辑（如按钮的不同状态、尺寸）、主题切换、需要精细控制的组件样式、SSR友好的动态样式。

示例：混合使用二者 #

import { styled } from '../stitches.config';

// 用Stitches定义带变体的自定义按钮
const Button = styled('button', {
  padding: '8px 16px',
  borderRadius: '4px',
  fontFamily: 'inherit',
  cursor: 'pointer',
  border: 'none',

  variants: {
    variant: {
      primary: {
        backgroundColor: '$primary',
        color: 'white',
        '&:hover': { backgroundColor: '#2563eb' },
      },
      secondary: {
        backgroundColor: 'transparent',
        border: '1px solid $primary',
        color: '$primary',
      },
    },
    size: {
      sm: { padding: '4px 8px', fontSize: '14px' },
      lg: { padding: '12px 24px', fontSize: '18px' },
    },
  },
});

export default function Home() {
  return (
    // 用Tailwind做页面布局
    <div className="container mx-auto p-8">
      <h1 className="text-3xl font-bold mb-6">混合使用Stitches与Tailwind</h1>
      <div className="flex gap-4">
        {/* 自定义按钮结合Tailwind的margin类 */}
        <Button variant="primary" size="lg" className="mr-2">
          主按钮
        </Button>
        <Button variant="secondary" className="ml-2">
          次按钮
        </Button>
      </div>
    </div>
  );
}

注意事项 #

• 保持设计系统一致：Stitches的断点、颜色尽量与Tailwind对齐，避免样式冲突或视觉不一致。
• 避免重复定义：如果Tailwind已有合适的原子类，就无需在Stitches中重复编写相同样式。
• 优先使用Tailwind做通用样式，Stitches做组件专属样式，减少样式冗余。

内容的提问来源于stack exchange，提问作者Onkeltem