Next.js14 CSS样式设置和Tailwind的使用

全局样式

在项目的app文件夹内有个globals.css，我们可以在这个全局样式文件里，重置CSS规则，或者存放全站的一些公共样式。

可以将globals.css引入到任何需要的组件中，但通常最好将其添加到顶级组件中，顶级文件就是我们的根布局（/app/layout.tsx）。这样我们整个项目都能使用到设置的全局样式。在globals.css随意写个样式

//globals.css
省略...
.base-bg{
  background-color: #0070F1;
  height: 100px;
  padding: 40px;
}

在app/layout.tsx

// app/layout.tsx
import './globals.css'
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

在app/users/page.tsx里面使用

//app/users/page.tsx
export default function UsersPage() {
    return (
        <div className="base-bg">
            <h2>Hello User1</h2>
        </div>
    )
}

Tailwind

Next.js 现在默认附带Tailwind CSS配置，当你使用create-next-app开始一个新项目时，Next.js会询问你是否想要使用Tailwind。如果你选择是，Next.js将自动在你的应用程序中安装必要的包并配置Tailwind。

什么是Tailwind呢?它是一个css框架，能让你快速的引入需要的样式，加快开发速度。

在 Tailwind 中，您可以通过添加类名称来设置元素的样式。例如，添加类”text-red-500″将使文本变成<h2>红色：

//app/users/page.tsx
<h2 className="text-red-500">Hello User1</h2>

虽然CSS样式在全局共享，但每个类都单独应用于每一个元素。这意味着如果你添加或删除一个元素，你不必担心维护单独的样式表、样式冲突，或者随着应用程序的扩展，你的CSS包的大小会增长。

例如我们给app/page.tsx背景色加上蓝色

//app/page.tsx
export default function Home() {
  return (
    <main className="flex min-h-screen bg-blue-500  p-24">
     <h1>一起学习Next.js</h1>
    </main>
  )
}

比如你要画个三角形：

  <div className="h-0 w-0 border-b-[30px] border-l-[20px] border-r-[20px] border-b-black border-l-transparent border-r-transparent" />

CSS模块

CSS 模块允许你通过自动创建唯一的类名来将 CSS 范围限定为组件，因此也不必担心样式冲突。在app/users下创建一个名为users.module.css的文件，并添加一下css：

//app/users/users.module.css
.shape {
   height: 0;
   width: 0;
   border-bottom: 30px solid red;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
}

在app/users/page.tsx中使用

//app/users/page.tsx
import styles from './users.module.css'
export default function UsersPage() {
   return (
       <div className="base-bg">
           <h2 className="text-red-500">Hello User1</h2>
           <div className={styles.shape}></div>
       </div>
   )
}

如果不想用Tailwind，那就用CSS模块。当然也可以两者都用的。

使用clsx库切换类名

在某些情况下，可能需要根据状态或其他条件有条件地设置元素的样式。

clsx是一个可以让您轻松切换类名的库。

首先要安装一下这个库：

 npm install --save clsx

假设您要创建一个InvoiceStatus接受status. 状态可以是’pending‘或’paid‘。
如果是’paid‘，您希望颜色为绿色。如果是’pending‘，您希望颜色为灰色。

可以用来clsx有条件地应用这些类，如下所示：

import clsx from 'clsx';
 
export default function InvoiceStatus({ status }: { status: string }) {
  return (
    <span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-sm',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
    >
    // ...
)}