Next项目中添加CSS样式_next 引入css

前言

刚接触Next，发现写单独的.css文件引入页面不生效，也不能像vue文件一样写style，网上关于Next的介绍又比较少，最后只能从Next官网找突破口。下面就介绍下在Next中添加CSS样式的几种方法。

---

一、使用tailwindcss

推荐使用
优点：代码看上去很简洁，可以完成绝大部分样式需求
缺点：不能进行样式穿透修改组件库的样式
tailwindcss官网

home.js

function Home() {
  return (
    <>
      <h1 className="text-center bg-red-600">我是home页面</h1>
    </>
  );
}
export default Home;
1
2
3
4
5
6
7
8

二、创建 文件名.module.css文件

文件名必须是 什么.module.css

home.module.css

.title {
  color: red;
  text-align: center;
}
1
2
3
4

home.js

import style from "./home.module.css";
function Home() {
  return (
    <>
      <h1 className={style.title}>我是home页面</h1>
    </>
  );
}
export default Home;
1
2
3
4
5
6
7
8
9

三、直接写在JS文件中

home.js

不推荐使用，会显得文件很杂乱

function Home() {
  return (
    <>
      <h1 className="title">我是home页面</h1>
      <style>
        {`
         .title {
            color: red;
            text-align: center;
          }
        `}
      </style>
    </>
  );
}
export default Home;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16