news 2026/3/7 2:01:22

Next.js第二十五章(CSS方案)

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Next.js第二十五章(CSS方案)

Next.js CSS方案

在Next.js可以使用多种Css方案，包括：

  • Tailwind CSS(个人推荐)
  • CSS Modules(创建css模块化，类似于Vue的单文件组件)
  • Next.js内置Sass(css预处理器)
  • 全局Css(全局的css，可以全局使用)
  • Style(内联样式)
  • css-in-js(类似于React的styled-components，不推荐)

Tailwind CSS

Tailwind CSS(css原子化)，他是一个css框架，可以让你快速构建网页，他提供了大量的css类，你只需要使用这些类，就可以快速构建网页。

Tailwind CSS

安装教程
npx create-next-app@latest my-project

当我们去创建Next.js项目的时候，选择customize settings(自定义选项)那么就会出现Tailwind CSS的选项，我们选择Yes即可。

那么如果我在当时忘记选择Tailwind CSS，我该怎么安装呢？

Next.js Tailwind CSS 安装教程

在 Next.js 中安装并使用 Tailwind CSS

下面是如何在 Next.js 项目中集成 Tailwind CSS 的详细流程：

1. 创建你的 Next.js 项目

如果还没有项目，可以使用 Create Next App 快速初始化：

npx create-next-app@latest my-project --typescript --eslint --appcdmy-project
2. 安装 Tailwind CSS 及相关依赖

通过 npm 安装tailwindcss、@tailwindcss/postcss以及postcss依赖：

npminstalltailwindcss @tailwindcss/postcss postcss
3. 配置 PostCSS 插件

在项目根目录下创建postcss.config.mjs文件，并添加如下内容：

constconfig={plugins:{"@tailwindcss/postcss":{},},};exportdefaultconfig;
4. 导入 Tailwind CSS

在./app/globals.css文件中添加 Tailwind CSS 的导入：

@import"tailwindcss";
5. 启动开发服务

运行开发服务：

npmrun dev
6. 在项目中开始使用 Tailwind

现在可以直接在组件或页面中使用 Tailwind CSS 的工具类来进行样式编写。例如：

exportdefaultfunctionHome(){return(<h1 className="text-3xl font-bold underline">Hello world!</h1>)}

这样即可在项目中使用 Tailwind CSS 原子类来快速开发样式。

FAQ

这么多类名我记不住怎么办？

答：你不需要特意去记忆，tailwindCss的类名都是简称，例如backdround-color:red你可以简写为bg-red-500。另外就是官网也提供文档可以查询，再其次就是还提供了vscode插件，可以自动补全类名。

CSS Modules

CSS Modules 是一种 CSS 模块化方案，可以让你在组件中使用CSS模块化，类似于Vue的单文件组件(scoped)。

Next.js已经内置了对CSS Modules的支持，你只需要在创建文件的时候新增.module.css后缀即可。例如index.module.css。

/** index.module.css */.container{background-color:red;}
/** index.tsx */importstylesfrom'./index.module.css';exportdefaultfunctionHome(){return(<div className={styles.container}><h1>Home</h1></div>)}

你会发现他编译出来的类名，就会生成一个唯一的hash值，这样就可以避免类名冲突。

<h1class="index-module__ifV0vq__test">小满zs Page</h1>

Next.js内置Sass

Next.js已经内置了对Sass的支持，但是依赖还需要手动安装，不过配置项它都内置了，只需要安装一下即可。

npminstall--save-dev sass

另外Next.js还支持配置全局sass变量，只需要在next.config.js中配置即可。

importtype{NextConfig}from'next'constconfig:NextConfig={reactCompiler:true,reactStrictMode:false,cacheComponents:false,sassOptions:{additionalData:`$color: blue;`,// 全局变量}}exportdefaultconfig

全局Css

全局CSS，就是把所有样式应用到全局路由/组件，那应该怎么搞呢?

在根目录下创建globals.css文件，然后添加全局样式。

/** app/globals.css */body{background-color:red;}.flex{display:flex;justify-content:center;align-items:center;}

在layout.tsx文件中引入globals.css文件。

//app/layout.tsximport'./globals.css'exportdefaultfunctionRootLayout({children}:{children:React.ReactNode}){return(<html lang="en"><body>{children}</body></html>)}

Style

Style，就是内联样式，就是直接在组件中使用style属性来定义样式。

exportdefaultfunctionHome(){return(<div style={{backgroundColor:'red'}}><h1>Home</h1></div>)}

css-in-js

css-in-js，就是把css + js + html混合在一起，拨入styled-components，不推荐很多人接受不了这种写法。

1.安装启用styled-components
npminstallstyled-components
importtype{NextConfig}from'next'constconfig:NextConfig={compiler:{styledComponents:true// 启用styled-components}}exportdefaultconfig
2.创建style-component注册表

使用styled-componentsAPI 创建一个全局注册表组件，用于收集渲染过程中生成的所有 CSS 样式规则，以及一个返回这些规则的函数。最后，使用该useServerInsertedHTML钩子将注册表中收集的样式注入到<head>根布局的 HTML 标签中。

//lib/registry.ts'use client'importReact,{useState}from'react'import{useServerInsertedHTML}from'next/navigation'import{ServerStyleSheet,StyleSheetManager}from'styled-components'exportdefaultfunctionStyledComponentsRegistry({children,}:{children:React.ReactNode}){// Only create stylesheet once with lazy initial state// x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-stateconst[styledComponentsStyleSheet]=useState(()=>newServerStyleSheet())useServerInsertedHTML(()=>{conststyles=styledComponentsStyleSheet.getStyleElement()styledComponentsStyleSheet.instance.clearTag()return<>{styles}</>})if(typeofwindow!=='undefined')return<>{children}</>return(<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>{children}</StyleSheetManager>)}
3.注册style-component注册表
//app/layout.tsximportStyledComponentsRegistryfrom'./lib/registry'exportdefaultfunctionRootLayout({children,}:{children:React.ReactNode}){return(<html><body><StyledComponentsRegistry>{children}</StyledComponentsRegistry></body></html>)}
4.使用styled-components
'use client';importstyledfrom'styled-components';constStyledButton=styled.button`background-color: red; color: white; padding: 10px 20px; border-radius: 5px;`;exportdefaultfunctionHome(){return(<StyledButton>Click me</StyledButton>)}
版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/3/6 10:58:52

C语言学习记录——BC116 记数问题

记数问题_牛客题霸_牛客网 #include <stdio.h>int main() {int a, b;int count0;//用于计算b出现次数while (scanf("%d %d", &a, &b) ! EOF) { // 注意 while 处理多个 case// 64 位输出请用 printf("%lld") to for(int i1;i<a;i)//用于产…

作者头像 李华
网站建设 2026/3/4 10:06:14

英雄之旅：改写你的人生剧本

《解锁真正的自我：一场深入内心的成长之旅》专栏 系列四：穿越转折之谷 第2篇 —— 在平凡日子里，活出“史诗感” 你不是路人甲，你是那个正在经历“试炼”的主角。 你有没有觉得自己像个“NPC”？ 咱们先不扯大道理，聊聊真实的感受。 你也知道，老马我在IT圈摸爬滚打…

作者头像 李华
网站建设 2026/2/28 11:36:38

使用GSD，在Claude Code中战胜上下文腐烂

迄今为止&#xff0c;我通常只在现有项目中使用LLM工具。尽管LLM付出了真诚的努力&#xff0c;但通过像Claude这样的智能体LLM&#xff0c;以“氛围编程”的方式从零开始创建详细项目的尝试往往会失败。它经常忘记信息或在非生产性循环中消耗令牌。 GSD扩展助Claude克服LLM“上…

作者头像 李华
网站建设 2026/3/5 17:41:37

汽车行业如何通过百度UMEDITOR实现WORD技术文档中图片的跨平台展示？

今天早上又有网友加我微信私聊&#xff0c;说是想了解一下这块的技术和方案。实际我的微信号之前就已经在网上公开了&#xff0c;但是很多网友还是说找不到&#xff0c;这个可真有点难度了。 昨天晚上论坛里面有一个网友给我发私信&#xff0c;也是遇到了word内容复制粘贴的问题…

作者头像 李华
网站建设 2026/3/4 18:43:05

知网个人版查AI率准吗？2026年官方服务使用指南

知网个人版查AI率准吗&#xff1f;2026年官方服务使用指南 很多同学问我&#xff1a;知网个人版查AI率准不准&#xff1f;和学校查的一样吗&#xff1f; 这篇文章帮你搞清楚知网AIGC检测服务的各种问题。 知网AIGC检测服务类型 知网目前有两种AIGC检测服务&#xff1a; 服务…

作者头像 李华
网站建设 2026/3/5 7:55:06

新媒体从业者必备！这款工具让工作隐私双安心

做新媒体这行&#xff0c;手机既是移动办公台&#xff0c;又是私域生活圈。要装剪映、秀米、135 编辑器等工作工具&#xff0c;还要存客户资料、未发布文案、敏感数据&#xff0c;偶尔同事借手机传文件、家人拿手机看视频&#xff0c;总怕隐私泄露或工作内容被误触&#xff0c;…

作者头像 李华