news 2026/5/10 21:24:27

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/5/1 5:28:48

C语言学习记录——BC117 逆序输出

逆序输出_牛客题霸_牛客网 #include <stdio.h>int main() {int arr[10];for(int i0;i<10;i){scanf("%d",&arr[i]);//输入10个数&#xff0c;数组下标i从0开始到9结束}for(int i9;i>0;i--){printf("%d ",arr[i]);//逆序打印下标从9开始递减…

作者头像 李华
网站建设 2026/5/9 3:12:05

Deepoc具身模型：让无人机成为“跨场景任务的智能协同枢纽”

在应急勘探、生态守护、城市运维等多元场景中&#xff0c;无人机的空中机动性本应成为撬动作业效率革新的核心支点&#xff0c;但传统无人机始终未能突破“环境适配局限、任务协同孱弱、数据转化低效”的桎梏——面对复杂地形易失联、多任务并行难统筹、采集数据需人工二次研判…

作者头像 李华
网站建设 2026/5/8 13:01:49

金手指PCB故障预判分级修复与寿命延长策略

在金手指 PCB 的全生命周期中&#xff0c;合理的故障预判、分级修复与寿命优化&#xff0c;可避免小故障扩大为整机损坏&#xff0c;同时在不损伤核心结构的前提下&#xff0c;延长使用周期。很多用户缺乏故障判断能力&#xff0c;要么轻微污染就直接更换板卡造成浪费&#xff…

作者头像 李华
网站建设 2026/5/10 21:24:03

php 高精度数学扩展 bcmath 知识笔记

一、bcmath 简介bcmath 是 PHP 内置的高精度数学扩展&#xff08;Binary Calculator&#xff09;&#xff0c;专用于处理高精度和大数值的十进制运算&#xff0c;能够有效避免浮点数精度丢失问题。其核心机制是通过字符串形式存储和处理数值&#xff0c;并支持自定义运算精度。…

作者头像 李华
网站建设 2026/5/1 5:50:36

MindSpore 大模型可解释性与鲁棒性协同优化：梯度归因可视化 + 对抗训练

在金融风控、医疗诊断等强监管场景下&#xff0c;大模型的 **“决策黑盒” 问题与对抗样本脆弱性 ** 是落地核心障碍 —— 前者无法满足监管的 “可解释性” 要求&#xff0c;后者会导致模型在恶意扰动下精度暴跌 50% 以上。本次分享基于 MindSpore 的梯度计算与对抗训练高阶特…

作者头像 李华