JackyLove 的技术人生

人生艰难，唯有一技傍身才能慢慢走向通途。个人博客，记录生活，分享技术，记录成长。专注全栈技术，next技术。

第15章—样式篇TailwindCSS、CSS-in-JS与Sass

首次发表于 2024-03-22， 更新于 2024-03-22

前言

Next.js 支持多种方式添加样式：

  1. 内联 CSS
  2. CSS 模块：创建局部 CSS 避免命名冲突，提升可维护性
  3. 全局 CSS
  4. 外部样式表
  5. Tailwind CSS：一个 CSS 框架，通过组合的方式声明样式
  6. CSS-in-JS：将 CSS 直接嵌入到 JavaScript 组件中，实现动态和局部样式
  7. Sass：最流行的 CSS 预处理器

让我们来一一讲解。

1. 内联 CSS

最基础的添加样式的方式便是使用内联 CSS，举个例子：

// app/about/page.js
export default function About() {
  return (
    <h1 style={{
      color: red;
    }}>Hello About!</h1>
  )
}

2. CSS 模块

Next.js 内置了对 CSS 模块的支持。使用 CSS 模块，你只需要使用 .module.css作为文件后缀名，Next.js 就会自动进行处理。

CSS 模块的作用在于实现局部 CSS，本质是创建一个不会重复的类名。这样你就可以在不同的文件里使用相同的类名，而不用担心发生样式冲突。这是最理想的实现组件级别 CSS 的方式。

让我们举个例子：

首先，创建一个 styles.module.css文件，样式书写方式如同正常的 CSS 文件：

// app/dashboard/styles.module.css
.dashboard {
  padding: 24px;
}

然后，CSS 模块可以被导入到 app 目录下的任意文件，让我们导入并使用该样式：

// app/dashboard/layout.js
import styles from './styles.module.css'
 
export default function DashboardLayout({ children }) {
  return <section className={styles.dashboard}>{children}</section>
}

3. 全局样式

全局样式，顾名思义，应用到所有路由的样式，像我们传统写页面 CSS 的时候，都会引入 normalize.css 或者 reset.css等，这种场景就适合使用全局样式。

全局样式可以被导入 app 目录下的任意 layout、page 或者组件中。（为什么总是强调任意呢？因为在 pages 目录下，也就是之前的 Pages Router 模式，全局样式只能被导入到 _app.js 文件，这是一个新的改变。）

具体怎么使用呢？让我们举个例子：

首先，创建一个 app/global.css 样式文件：

body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

然后，在根布局（app/layout.js）导入 global.css，该样式会被应用于应用里的每个路由：

// app/layout.js
import './global.css'
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

4. 外部样式表

你也可以通过导入外部包的方式添加样式，举个例子：

// app/layout.js
import 'bootstrap/dist/css/bootstrap.css'
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className="container">{children}</body>
    </html>
  )
}

不过要注意，该外部包必须是从 npm 包直接导入或者下载完和你的代码放在一起。不能使用 <link rel="stylesheet" />这种方式。

使用样式的时候要注意：

即时刷新： 在本地使用next dev 运行项目的时候，本地样式（无论是全局样式还是 CSS 模块），都会在你保存更改后立刻刷新，你可以即时看到样式变化。

打包构建 ：当使用 next build 的时候，CSS 文件会被打包成更少的压缩 .css 文件，这是为了减少网络请求，从而提高加载速度，所以不用担心创建多个 css 文件而影响了性能。

禁用 JS： 当你禁用 JavaScript 的时候，在生产版本（next start），样式依然会被加载。也就是说，打包构建后的代码中的 CSS 并不是通过 JS 注入的。但是开发的时候（next dev），为了开启快速刷新，JavaScript 依然是有必要的。

5. Tailwind CSS

Tailwind CSS 是一个非常知名的 CSS 框架，本质是一个工具集，包含了大量比如 flex、pt-4、text-center、rotate-90等工具类，可以组合使用并直接在 HTML 代码上实现任何 UI 设计。与 Next.js 搭配使用非常顺手。Next.js 官方便是用的 Tailwind CSS。

在使用 create-next-app创建项目的时候，如果你在命令行中选择了使用 Tailwind CSS，则相关配置都会自动生成，可以直接使用。如果没有选择，希望引入 Tailwind CSS，可以参考此步骤。其实 Tailwind CSS 官方也提供了针对各个框架的使用指南：

5.1. 安装

在项目根目录执行以下命令：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

会同时生成 tailwind.config.js和 postcss.config.js文件。

5.2. 配置 Tailwind

postcss.config.js 不需要修改。在 tailwind.config.js 中添加使用 Tailwind CSS 类名的文件路径：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
 
    // 嫌麻烦，你也可以直接使用 `src` 目录
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

5.3. 导入样式

添加 Tailwind CSS 指令，将 Tailwind 的样式注入到全局样式中。使用方式如下：

// app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

在根布局（app/layout.tsx），导入 globals.css ：

// app/layout.js 
import './globals.css'
 
export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

5.4. 使用类名

然后你就可以在应用里使用 Tailwind 的工具类名：

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

5.5. 辅助使用

在 VSCode 中使用的时候，可以安装 Tailwind CSS IntelliSense 这个插件，提供自动功能、语法校验、悬停预览等功能。

image.png

Tailwind CSS 中的工具类众多，记不清的时候也可以查询这个速查表。

6. CSS-in-JS

6.1. 介绍

CSS-in-JS，顾名思义，将 CSS 写在 JS 文件里，而不是单独新建如 .css、.scss等文件。这样就可以在 CSS 中使用 JS 的变量定义、函数调用、条件判断等功能。

之所以能够流行，也跟 React、Vue 等框架的流行有关，“组件”的概念开始深入人心。因为 Vue 本身有自己的 CSS 方案，React 没有，所以 CSS-in-JS 也多在 React 社区中讨论。

image.png

实现 CSS-in-JS 的库有很多，每个库的实现、使用方式、语法也不尽相同。目前 Next.js 客户端组件中支持使用的库有：

emotion 正在支持中……

如果你希望设置服务端组件的样式，推荐使用 CSS 模块或者其他输出 CSS 文件的解决方案比如 PostCSS 或者 Tailwind CSS。

6.2. 配置方式

在 Next.js 中配置 CSS-in-JS 的基本原理分为三步：

  1. 在渲染的时候有一个包含所有 CSS 规则的样式注册表
  2. 使用 useServerInsertedHTMLhook 在内容被使用前注入样式规则
  3. 使用包含样式注册表的客户端组件包裹应用

6.3. styled-jsx

这三步听起来有些复杂，让我们以 styled-jsx 为例进行讲解。注意在客户端组件使用 styled-jsx至少需要使用 v5.1.0版本。

首先创建一个新的注册表：

'use client'
// app/registry.js
import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
 
export default function StyledJsxRegistry({ children }) {
  const [jsxStyleRegistry] = useState(() => createStyleRegistry())
 
  useServerInsertedHTML(() => {
    const styles = jsxStyleRegistry.styles()
    jsxStyleRegistry.flush()
    return <>{styles}</>
  })
 
  return <StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>
}

然后用此包含注册表的组件包裹根组件的 children：

// app/layout.js
import StyledJsxRegistry from './registry'
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <StyledJsxRegistry>{children}</StyledJsxRegistry>
      </body>
    </html>
  )
}

然后你就可以在 page.js 中使用：

export default function Page() {
  return (
    <div>
      <div className="container">text
      </div>

      <style jsx>{`
        .container {
          display: grid;
          grid-template-columns: repeat(1, minmax(0, 1fr));
          gap: 1.5rem /* 24px */;
        }

        @media (min-width: 1024px) {
          .container {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }
        }
      `}</style>
    </div>
  );
}

示例代码地址：https://github.com/vercel/app-playground/tree/main/app/styling/styled-jsx

6.4. Styled Components

Styled Components 的配置也大致如此，注意使用 styled-components@6 或者更高版本。

首先，创建一个全局注册表：

'use client'
// lib/registry.js
import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
 
export default function StyledComponentsRegistry({ children }) {
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
 
  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement()
    styledComponentsStyleSheet.instance.clearTag()
    return <>{styles}</>
  })
 
  if (typeof window !== 'undefined') return <>{children}</>
 
  return (
    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
      {children}
    </StyleSheetManager>
  )
}

然后用此包含注册表的组件包裹根组件的 children：

// app/layout.js
import StyledComponentsRegistry from './lib/registry'
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
      </body>
    </html>
  )
}

然后你就可以在 page.js 中使用：

'use client';

import styled from 'styled-components';

const Container = styled.div`
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem /* 24px */;
`;

const SkeletonInner = styled.div`
  padding: 1rem /* 16px */;
  background-color: rgb(24 24 27 / 0.8);
  border-radius: 1rem /* 16px */;
`;

const SkeletonImg = styled.div`
  height: 3.5rem /* 56px */;
  border-radius: 0.5rem /* 8px */;
  background-color: rgb(63 63 70 / 1);
`;

const SkeletonBtn = styled.div`
  margin-top: 0.75rem /* 12px */;
  width: 25%;
  height: 0.75rem /* 12px */;
  border-radius: 0.5rem /* 8px */;
  background-color: rgb(255 0 128 / 1);
`;

const Skeleton = () => (
  <SkeletonInner>
    <SkeletonImg />
    <SkeletonBtn />
  </SkeletonInner>
);

export default function Page() {
  return (
    <div className="space-y-4">
      <h1 className="text-xl font-medium text-gray-400/80">
        Styled with Styled Components
      </h1>
      <Container>
        <Skeleton />
        <Skeleton />
        <Skeleton />
      </Container>
    </div>
  );
}

示例代码地址：https://github.com/vercel/app-playground/tree/main/app/styling/styled-components

7. Sass

7.1. Sass 使用

Sass 作为知名的 CSS 预处理器已无须过多介绍。Next.js 内置了对 Sass 文件的支持，你需要使用 .scss和 .sass作为文件后缀。

你也可以结合 CSS 模块使用组件级别的 Sass， 你需要使用.module.scss或者 .module.sass作为文件后缀。

使用 sass，你需要首先安装 sass：

npm install --save-dev sass

7.2. 自定义配置

如果你希望配置 Sass 编译器，使用 next.config.js 的 sassOptions选项：

// next.config.js
const path = require('path')
 
module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

7.3 Sass 变量

Next.js 支持从 CSS 模块文件导出 Sass 变量。这是一个示例代码：

// app/variables.module.scss
$primary-color: #64ff00;
 
:export {
  primaryColor: $primary-color;
}

// app/page.js
// maps to root `/` URL
 
import variables from './variables.module.scss'
 
export default function Page() {
  return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>
}

参考链接

  1. Styling: CSS Modules
  2. Styling: Tailwind CSS
  3. Styling: CSS-in-JS
  4. Styling: Sass
  5. State of CSS 2023: CSS-in-JS
© Copyright 2025 JackyLove 的技术人生. Powered with ♥ by CreativeDesignsGuru