核心内容摘要
2025.06.10【技术探索】|PromptBio：AI赋能的生信分析新范式
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 CSSTailwind CSS(css原子化)他是一个css框架可以让你快速构建网页他提供了大量的css类你只需要使用这些类就可以快速构建网页。
Tailwind CSS安装教程npx create-next-applatest my-project当我们去创建Next.js项目的时候选择customize settings(自定义选项)那么就会出现Tailwind CSS的选项我们选择Yes即可。
那么如果我在当时忘记选择Tailwind CSS我该怎么安装呢Next.js Tailwind CSS 安装教程在 Next.js 中安装并使用 Tailwind CSS下面是如何在 Next.js 项目中集成 Tailwind CSS 的详细流程
创建你的 Next.js 项目如果还没有项目可以使用 Create Next App 快速初始化npx create-next-applatest my-project --typescript --eslint --appcdmy-project
安装 Tailwind CSS 及相关依赖通过 npm 安装tailwindcss、tailwindcss/postcss以及postcss依赖npminstalltailwindcss tailwindcss/postcss postcss
配置 PostCSS 插件在项目根目录下创建postcss.config.mjs文件并添加如下内容constconfig{plugins:{tailwindcss/postcss:{},},};exportdefaultconfig;
导入 Tailwind CSS在./app/globals.css文件中添加 Tailwind CSS 的导入importtailwindcss;
启动开发服务运行开发服务npmrun dev
在项目中开始使用 Tailwind现在可以直接在组件或页面中使用 Tailwind CSS 的工具类来进行样式编写。
例如exportdefaultfunctionHome(){return(h1 classNametext-3xl font-bold underlineHello world!/h
}这样即可在项目中使用 Tailwind CSS 原子类来快速开发样式。
FAQ这么多类名我记不住怎么办答你不需要特意去记忆tailwindCss的类名都是简称例如backdround-color:red你可以简写为bg-red-500。
另外就是官网也提供文档可以查询再其次就是还提供了vscode插件可以自动补全类名。
CSS ModulesCSS 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}h1Home/h1/div)}你会发现他编译出来的类名就会生成一个唯一的hash值这样就可以避免类名冲突。
h1classindex-module__ifV0vq__test小满zs Page/h1Next.js内置SassNext.js已经内置了对Sass的支持但是依赖还需要手动安装不过配置项它都内置了只需要安装一下即可。
npminstall--save-dev sass另外Next.js还支持配置全局sass变量只需要在next.config.js中配置即可。
importtype{NextConfig}fromnextconstconfig: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.cssexportdefaultfunctionRootLayout({children}:{children:React.ReactNode}){return(html langenbody{children}/body/html)}StyleStyle就是内联样式就是直接在组件中使用style属性来定义样式。
exportdefaultfunctionHome(){return(div styleh1Home/h1/div)}css-in-jscss-in-js就是把css js html混合在一起拨入styled-components不推荐很多人接受不了这种写法。
安装启用styled-componentsnpminstallstyled-componentsimporttype{NextConfig}fromnextconstconfig:NextConfig{compiler:{styledComponents:true// 启用styled-components}}exportdefaultconfig
创建style-component注册表使用styled-componentsAPI 创建一个全局注册表组件用于收集渲染过程中生成的所有 CSS 样式规则以及一个返回这些规则的函数。
最后使用该useServerInsertedHTML钩子将注册表中收集的样式注入到head根布局的 HTML 标签中。
//lib/registry.tsuse clientimportReact,{useState}fromreactimport{useServerInsertedHTML}fromnext/navigationimport{ServerStyleSheet,StyleSheetManager}fromstyled-componentsexportdefaultfunctionStyledComponentsRegistry({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((){conststylesstyledComponentsStyleSheet.getStyleElement()styledComponentsStyleSheet.instance.clearTag()return{styles}/})if(typeofwindow!undefined)return{children}/return(StyleSheetManager sheet{styledComponentsStyleSheet.instance}{children}/StyleSheetManager)}