在Next.js中，您可以通过检查`window`对象是否存在来确定当前的代码是在服务器端还是客户端运行。`window`对象是浏览器环境的全局对象，它在服务器端是不存在的。因此，您可以通过尝试访问`window`来决定当前的代码执行环境。

以下是一个如何检测的例子：

```javascript
const isClientSide = () => {
  return typeof window !== 'undefined';
};

const isServerSide = () => {
  return typeof window === 'undefined';
};
```

您可以在您的组件或者函数内部使用这些辅助函数来确定执行环境。例如：

```javascript
function MyComponent() {
  if (isClientSide()) {
    // 客户端特定的代码
    console.log("这段代码在客户端运行");
  }

  if (isServerSide()) {
    // 服务器端特定的代码
    console.log("这段代码在服务器端运行");
  }

  // ...
}
```

需要注意的是，Next.js 支持服务器端渲染（SSR）和静态站点生成（SSG），因此组件的生命周期函数（如`getServerSideProps`，`getStaticProps`等）肯定是在服务器端执行的。而 `useEffect`钩子函数里面的代码，以及组件渲染的大部分逻辑，则在客户端执行。

始终要小心处理服务器端和客户端代码，因为在服务器端使用任何客户端特有的API（如`window`或`document`）都会导致错误。同样地，如果你在服务器端执行了本应只在客户端执行的代码，也可能会有未预期的后果。

现在（2020 年 1 月）应该是这样，`typeof window === 'undefined'`因为`process.browser`已弃用

参考[https://github.com/zeit/next.js/issues/5354#issuecomment-520305040](https://github.com/zeit/next.js/issues/5354#issuecomment-520305040)

您可以用来`process.browser`区分服务器环境（NodeJS）和客户端环境（浏览器）。

`process.browser`位于`true`客户端和`undefined`服务器端。

由于我不喜欢依赖奇怪的第三方事物来实现这种行为（尽管`process.browser`似乎来自_Webpack_），所以我认为首选的检查方法是检查是否存在`appContext.ctx.req`这样的情况：

    async getInitialProps (appContext) {
    
        if (appContext.ctx.req) // server? 
        {
            //server stuff
        }
        else {
            // client stuff
        }
    }
    

来源： https: [//github.com/zeit/next.js/issues/2946](https://github.com/zeit/next.js/issues/2946)

另一项注意事项是`componentDidMount()`始终在浏览器上调用。我经常加载初始数据集（seo 内容）`getInitialProps()`，然后在方法中加载更深入的数据 `componentDidMount()`。

另外，作为变体，您可以将变量添加到`.env`文件中而不带`NEXT_PUBLIC_`前缀。

> 就像： `IS_SERVER_FLAG=true`

该变量仅在服务器端可用

之后，您可以在代码中检查它

`const isServer = process.env.IS_SERVER_FLAG ? 'RUN ON SERVER' : 'RUN_ON_CLIENT'`

How do i detect whether i am on server on client in next js?

在 Next.js 的 `next/image` 组件中，通常我们不直接设置高度为100%，因为`next/image`组件是为了优化Web图片而设计的，它内部进行了很多优化处理，包括懒加载、图片压缩和各种尺寸的生成等。`next/image` 组件通常需要你提供图片的宽度和高度，以便能够生成不同尺寸的图片，以及保持图片的原始宽高比。

不过，如果你的设计需要让图片的高度适应其父元素的高度，可以通过几种方式来间接实现：

1. **使用外部容器来控制尺寸：** 你可以创建一个外部容器，并设置其高度为100%，然后将 `next/image` 组件放入其中，并使用`layout="fill"`属性，这样图片就会填充整个容器。

```jsx
<div style={{ position: 'relative', height: '100%' }}>
  <Image
    src="/path/to/image.jpg"
    alt="描述文字"
    layout="fill"
    objectFit="cover" // 或者其它适合的object-fit值
  />
</div>
```

在上述代码中，`objectFit`属性类似于CSS的`object-fit`，你可以设置为`cover`、`contain`、`none`等值，根据图片与容器的关系，让图片以不同的方式填充容器。

2. **使用样式覆盖：** 你可以通过全局样式或者内联样式的方式，覆盖`next/image`组件的默认样式。但是这种方式可能会破坏`next/image`的一些内部优化，所以不太推荐使用。

例如：
```css
/* 在全局样式文件中 */
.customImg {
  height: 100% !important;
}

/* 或者使用内联样式，需要注意的是，Next.js 不允许直接对 Image 组件使用内联样式，你可能需要通过其他方式如styled-jsx来实现 */
```

使用这种方法时，需要注意，直接改变`next/image`的高度可能会导致图片的宽高比失调，导致图片变形。

在实际项目中，推荐的方法是第一种，通过外部容器来控制图片的尺寸，这样能够更好地利用`next/image`组件的优化特性。如果必须要让图片的高度为100%，一定要注意图片的宽高比，确保图片不会因为尺寸调整而失真。

这对我有用。

和`next/image`：

    <div style={{width: '100%', height: '100%', position: 'relative'}}>
      <Image
        alt='Mountains'
        src='/mountains.jpg'
        layout='fill'
        objectFit='contain'
      />
    </div>
    

与`next/future/image`：

    <Image
        fill
        alt='Mountains'
        src='/mountains.jpg'
        sizes='100vw'/>
    

[下一个/未来/图像](https://nextjs.org/docs/api-reference/next/future/image)

**2023 年**，上述所有解决方案均已弃用，

使用下面

    <Image
      src="url"
      width={0}
      height={0}
      sizes="100vw"
      style={{ width: '100%', height: 'auto' }} // optional
    />
    

Github：[https://github.com/vercel/next.js/discussions/18474#discussioncomment-5501724](https://github.com/vercel/next.js/discussions/18474#discussioncomment-5501724)

<img src="/path/to/image.jpg" alt="" title="" />
    

在 NextJS 12 及更低版本中

    <Image src="/path/to/image.jpg" alt="" title="" width="100%" height="100%" layout="responsive" objectFit="contain"/>

这是一种方法：例如，我想要一个覆盖其容器（div）的整个宽度和高度的图像。

    <div className={'image-container'}>
      <Image src={path} layout="fill" className={'image'} />
    </div>
    

这是样式：（有一个容器 div 占据视口的一半宽度和高度，我的图像将覆盖它。）

    // Nested Styling
    .image-container {
        width: 50vw;
        height: 50vh;
        position: relative;
    
        .image {
            width: 100%;
            height: 100%;
            position: relative !important;
            object-fit: cover; // Optional
        }
    }
    
    // Or Normal Styling
    .image-container {
        width: 50vw;
        height: 50vh;
        position: relative;
      }
    .image-container .image {
        width: 100%;
        height: 100%;
        position: relative !important;
        object-fit: cover; // Optional
    }

在NextJS的 v13 版本中

```
       <Image
        src={src}
        width={200}
        height={160}
        alt={alt}
        sizes="(max-width: 768px) 100vw,
              (max-width: 1200px) 50vw,
              33vw"
        style={{ height: '100%', width: '100%' }} //The point is right there!
        //OR className='w-100 h-100'
      /> 
```

How to set the next image component to 100 height?

在 Next.js 中，可以通过两种主要方式设置应用的端口：

### 1. 使用命令行参数

你可以在启动 Next.js 应用时，通过命令行指定端口。默认情况下，Next.js 应用会在端口 3000 上运行。但如果你想改变端口，可以在 `npm run dev` 或者 `yarn dev` 命令后面添加 `-p` 参数，后跟你希望使用的端口号。例如，如果你想在端口 5000 上运行应用，可以这样操作：

```bash
npm run dev -p 5000
# 或者
yarn dev -p 5000
```

### 2. 在代码中设置

如果你需要在代码层面配置端口，你可以在 Next.js 自定义服务器的脚本中这样做。例如，如果你使用的是 Express.js 作为自定义服务器，你可以在 `server.js` 文件中设置端口，如下所示：

```javascript
const express = require('express');
const next = require('next');

const port = parseInt(process.env.PORT, 10) || 5000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.all('*', (req, res) => {
    return handle(req, res);
  });

  server.listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});
```

在上面的代码示例中，端口号被设置为环境变量 `PORT` 的值，如果没有指定，则默认为 `5000`。这样，你可以通过设置环境变量的方式灵活地更改端口号。

### 环境变量

另外，你还可以通过环境变量文件 `.env.local` 来设置端口号。但请注意，Next.js 并不直接支持通过环境变量来设置端口号，你需要在自定义服务器代码中读取环境变量来设置端口。

```bash
# .env.local 文件
PORT=5000
```

然后在 `server.js` 中读取这个环境变量：

```javascript
const port = parseInt(process.env.PORT, 10) || 3000;
```

### 结论

通常，大多数情况下使用命令行参数来设置端口就足够了，它简单直接。但如果你需要更复杂的配置，或者你的应用已经使用了自定义服务器，你可以在代码中设置端口。记住，对于生产环境部署，端口通常由部署环境决定，例如，许多 PaaS（平台即服务）如 Heroku 或 Vercel 会自动分配端口，你不需要手动设置。

This work for me:

    "scripts": { 
        "dev": "next dev -p 8080",
        "start": "next start -p 8080",
    },

"scripts": {
        "dev": "next dev -p 8080", // for dev 
        "start": "next start -p 8080" // for prod
    },

With `yarn`, `pnpm` you can easily pass any arguments:  
`yarn dev -p 8080` or `yarn dev --port=8080`

With `npm` using `--` to pass arguments:  
`npm run dev -- -p 8080`

The application will start at http://localhost:3000 by default. The default port can be changed with -p, like so:

     npx next dev -p 4000
    

Or using the PORT environment variable:

    PORT=4000 npx next dev
    

#note that I used npx not npm

You can also set the hostname to be different from the default of 0.0.0.0, this can be useful for making the application available for other devices on the network. The default hostname can be changed with -H, like so:

     npx next dev -H 192.168.1.2
    

If you're getting an error that the port is already in use, what you can do to resolve it on windows is

    Go to the Task Manager.
    
    Scroll and find a task process named. Node.js: Server-side
    
    End this particular task.

just need to do:

    yarn dev -p PORT_YOU_LIKE

How to set port in next js?

Next.js 和 Create React App（CRA）是构建React单页应用的两种流行框架/工具，它们在设计哲学和功能特点上有一些关键的区别：

1. **服务端渲染（SSR）与客户端渲染**：
   - **Next.js** 支持**服务端渲染**，这意味着React组件将在服务器上渲染成HTML，然后发送到客户端。这对于搜索引擎优化（SEO）和性能优化非常有用，因为用户可以更快地看到页面的第一次渲染，并且搜索引擎可以抓取内容。
     - 例如，如果我需要构建一个博客网站，服务端渲染可以让博客文章在用户访问时快速显示出来，同时也更利于搜索引擎索引。
   - **Create React App** 生成的是完全的**客户端JavaScript应用**，这意味着所有的渲染工作都在浏览器中完成。这可能会导致初始加载时间较长，尤其是在JavaScript较重的应用中。

2. **静态站点生成（SSG）**：
   - **Next.js** 还提供了静态站点生成的选项，允许你预先生成页面，在构建时将数据整合进HTML。这样做的好处是能够生成可以直接由CDN服务的、快速且成本低廉的页面。
     - 例如，如果我负责一个营销网站，其内容不经常改变，我可能会选择Next.js的静态站点生成功能，以便提供快速的加载时间并减少服务器成本。

3. **路由**：
   - **Next.js** 提供了一个基于文件系统的路由系统，你可以通过在`pages`文件夹中添加JS/TS文件来自动创建路由。这简化了路由的配置。
     - 例如，增加一个名为`about.js`的页面，Next.js会自动将其关联到`/about`这个URL路径。
   - **Create React App** 没有内建的路由系统，通常需要使用像React Router之类的第三方库来处理路由。

4. **构建和启动速度**：
   - **Next.js** 由于其功能更为丰富，可能在构建和启动时比CRA稍微慢一些，特别是在大型项目中。
   - **Create React App** 通常启动得更快，这对于小型项目和原型设计可能更有优势。

5. **设置和配置**：
   - **Next.js** 预设了很多配置，比如Webpack和Babel的配置，这为开发者提供了便利，但同时也可能对想要更细粒度控制的开发者造成限制。
     - 例如，我在工作中使用Next.js进行过一个项目，该项目受益于Next.js的预设配置，我们不需要花太多时间来配置Webpack。
   - **Create React App** 提供一个相对简单的起步体验，但如果你需要自定义配置（如Webpack），你可能需要'eject'，这会暴露所有的配置文件，从而允许更深层次的配置。

6. **API路由**：
   - **Next.js** 提供了API路由的功能，允许你在同一个项目中创建API端点，这对于构建全栈应用非常方便。
     - 举例来说，如果我需要构建一个应用并且希望前端和后端紧密集成，我可以在`pages/api`目录中直接添加API路由，而无需另外创建一个后端服务。

7. **社区和生态**：
   - 虽然这两个工具各自拥有庞大、活跃的社区，但是由于Next.js提供了更多的内建功能，它的生态系统可能相对于Create React App来说更为复杂且多样化。例如，Next.js社区中包含了更多关于服务端渲染和静态站点生成的最佳实践讨论，同时也有更多针对性能优化、SEO以及API路由管理的资源。

8. **部署和托管**：
   - **Next.js** 设计时就考虑了与Vercel（由同一开发团队维护）的无缝集成，使得部署Next.js应用变得非常简易。尽管如此，Next.js应用也可以部署在其他支持Node.js的平台上。
   - **Create React App** 生成的静态文件可以轻松地部署在任何可以托管静态文件的服务上，如GitHub Pages、Netlify或Vercel等。

9. **开箱即用的功能**：
   - **Next.js** 提供了许多开箱即用的功能，如图片优化（`next/image`）、国际化（i18n）路由、环境变量的支持等。
   - **Create React App** 更专注于提供一个干净、无预设的React环境，这意味着需要额外的工作来集成上述功能。

10. **灵活性与控制**：
    - **Next.js** 在提高开发效率的同时，牺牲了一定程度的灵活性。如果默认的配置不满足需求，可能需要更多时间来理解和修改内部设置。
    - **Create React App** 则提供了一个较为灵活的起点，尤其是在执行`eject`之后，开发者可以对构建等细节有完全的控制。

总结来说，Next.js和Create React App各自适合不同的场景和需求。Next.js更倾向于那些需要服务端渲染、静态站点生成和API路由等全栈特性的复杂应用，而Create React App则可能更适合那些需要快速启动并希望保持较高灵活性的简单客户端应用。选择哪个框架/工具，需要根据项目的具体需求、开发团队的技术栈以及对SEO和性能的考量来决定。

I've used both NextJs and CRA. Both these frameworks can be used to get started quickly and provide a good developer experience. However, both of these have use cases where either of them shines better. I'll try to compare them based on some of these factors. Feel free to suggest edits with additional points or comments

Server Side Rendering
---------------------

CRA

Next.js

CRA doesn't support SSR out of the box.  
However, you can still configure it.  
It just takes more effort to setup SSR with your preferred server and configuration. The development team doesn't have plans to support this in the near future. They [suggest other tools](https://github.com/facebook/create-react-app/blob/2da5517689b7510ff8d8b0148ce372782cb285d7/README.md#popular-alternatives) for this use case.

NextJs has [different types for SSR](https://nextjs.org/docs/basic-features/data-fetching). It supports SSR out of the box.  
\* Static generation: fetch data at build time. This works best for use cases like blogs or static websites  
\* Server side rendering: fetch data and render for each requests. You have to do this when you need to serve different view for different users.

* * *

Configurability
---------------

I think this is point where these tools are very different and your decision can depend on this factor

CRA

Next.js

Create React App doesn't leave you a lot of room to configure it.  
Configurations like webpack config cannot be changed unless  
you stray away from normal CRA way (eject, rescripts, rewired, craco).  
Basically, you have to use what's configured in  
`react-scripts` which is the core of CRA.

Almost everything is [configurable](https://nextjs.org/docs/api-reference/next.config.js/introduction).  
If you check the example [NextJs templates](https://github.com/vercel/next.js/tree/canary/examples/with-typescript-eslint-jest), you can see files like  
`babelrc`, `jest.config`, `eslintrc` etc  
that you can configure.

* * *

Maintainability
---------------

CRA

Next.js

CRA is very opinionated.  
If you keep updated with the releases of CRA, it's not hard to maintain.

NextJs is also well maintained. They release regular updates.

* * *

Typescript
----------

CRA

Next.js

Supports out of the box. You can initialize CRA app with typescript with  
`npx create-react-app my-app --template typescript`

[Supports typescript](https://nextjs.org/docs/basic-features/typescript) out of the box.  
Start with configurations for typescript with `touch tsconfig.json`

* * *

Hooks support
-------------

Latest version of both CRA and NextJs installs a version of React that supports hooks. You can also upgrade to the latest version easily

* * *

Redux support
-------------

Redux is a library that you can use with both these tools.

**Create React App** is just a React project creation engine to help you setup your React project quickly. After running the CRA script `npx create-react-app <appname>` you will get a nice and clean single-page application that you can run. Under the hood you also get things like babel, eslint, jest, webpack already setup so it's a really convenient way to start doing React development. And in case you'd need more control over the configuration of those tools, you can still use `npm run eject`.

**Next.js** on the other hand is a framework based on React to build Node.js server-side apps. This means you will use the same component-oriented logic to build pages and leverage the Next.js routing engine for page to page navigation. Server-side rendering will allow loading time to be more spread over time, so perceived performance will be probably better. Redux can be used as well but there will be some additional steps to make it work properly (see [https://github.com/kirill-konshin/next-redux-wrapper](https://github.com/kirill-konshin/next-redux-wrapper))

**Whatever you choose, in the end, it will be React coding**. _Components_, _JSX_, _TypeScript support_, _React hooks_, and all other core aspects of React will be supported either way. Therefore, you can expect similar degree of maintainability. On the other hand, scalability depends on your choice: if you choose Next.js you will host the app on a server infrastructure which should be sized according to your audience whereas React bundle created with CRA just need to be statically hosted somewhere.

TLDR
----

biggest difference is purpose of both projects. NextJS : [JAM Stack](https://jamstack.org/) or [Static Site Generator](https://www.staticgen.com/next) Create React App : is an officially supported way to create single-page React applications.

Explanation:
------------

This conundrum is true for many opensource projects. Seem alternative of other but they have key differences. For Example in this case Although both projects use ReactJS as front end and produce webapps. the problem they solve are very distinct. there are some overlapping features themes/templates in js. but development and future work will be to enhance project such that it helps solve there problem statement in better way.

i.e. NextJS will try to include if there are any new Markdown features developed. which won't be the case in CreateReactApps.

Suggestion.
-----------

from your question it seems you are looking these projects for developing React Native Apps. So I will suggest go with Create React App.

your comparison should primarily be whether this project align with Problem I am solving. then compare. Maintainability, Scalability, Typescript and React Hooks/Redux support.

In case needed more info do comment.

Next.js 和 Create React App（CRA）是构建React单页应用的两种流行框架/工具，它们在设计哲学和功能特点上有一些关键的区别：

1. **服务端渲染（SSR）与客户端渲染**：
   - **Next.js** 支持**服务端渲染**，这意味着React组件将在服务器上渲染成HTML，然后发送到客户端。这对于搜索引擎优化（SEO）和性能优化非常有用，因为用户可以更快地看到页面的第一次渲染，并且搜索引擎可以抓取内容。
     - 例如，如果我需要构建一个博客网站，服务端渲染可以让博客文章在用户访问时快速显示出来，同时也更利于搜索引擎索引。
   - **Create React App** 生成的是完全的**客户端JavaScript应用**，这意味着所有的渲染工作都在浏览器中完成。这可能会导致初始加载时间较长，尤其是在JavaScript较重的应用中。

2. **静态站点生成（SSG）**：
   - **Next.js** 还提供了静态站点生成的选项，允许你预先生成页面，在构建时将数据整合进HTML。这样做的好处是能够生成可以直接由CDN服务的、快速且成本低廉的页面。
     - 例如，如果我负责一个营销网站，其内容不经常改变，我可能会选择Next.js的静态站点生成功能，以便提供快速的加载时间并减少服务器成本。

3. **路由**：
   - **Next.js** 提供了一个基于文件系统的路由系统，你可以通过在`pages`文件夹中添加JS/TS文件来自动创建路由。这简化了路由的配置。
     - 例如，增加一个名为`about.js`的页面，Next.js会自动将其关联到`/about`这个URL路径。
   - **Create React App** 没有内建的路由系统，通常需要使用像React Router之类的第三方库来处理路由。

4. **构建和启动速度**：
   - **Next.js** 由于其功能更为丰富，可能在构建和启动时比CRA稍微慢一些，特别是在大型项目中。
   - **Create React App** 通常启动得更快，这对于小型项目和原型设计可能更有优势。

5. **设置和配置**：
   - **Next.js** 预设了很多配置，比如Webpack和Babel的配置，这为开发者提供了便利，但同时也可能对想要更细粒度控制的开发者造成限制。
     - 例如，我在工作中使用Next.js进行过一个项目，该项目受益于Next.js的预设配置，我们不需要花太多时间来配置Webpack。
   - **Create React App** 提供一个相对简单的起步体验，但如果你需要自定义配置（如Webpack），你可能需要'eject'，这会暴露所有的配置文件，从而允许更深层次的配置。

6. **API路由**：
   - **Next.js** 提供了API路由的功能，允许你在同一个项目中创建API端点，这对于构建全栈应用非常方便。
     - 举例来说，如果我需要构建一个应用并且希望前端和后端紧密集成，我可以在`pages/api`目录中直接添加API路由，而无需另外创建一个后端服务。

7. **社区和生态**：
   - 虽然这两个

Next.js 和 Create React App（CRA）是构建React单页应用的两种流行框架/工具，它们在设计哲学和功能特点上有一些关键的区别：

1. **服务端渲染（SSR）与客户端渲染**：
   - **Next.js** 支持**服务端渲染**，这意味着React组件将在服务器上渲染成HTML，然后发送到客户端。这对于搜索引擎优化（SEO）和性能优化非常有用，因为用户可以更快地看到页面的第一次渲染，并且搜索引擎可以抓取内容。
     - 例如，如果我需要构建一个博客网站，服务端渲染可以让博客文章在用户访问时快速显示出来，同时也更利于搜索引擎索引。
   - **Create React App** 生成的是完全的**客户端JavaScript应用**，这意味着所有的渲染工作都在浏览器中完成。这可能会导致初始加载时间较长，尤其是在JavaScript较重的应用中。

2. **静态站点生成（SSG）**：
   - **Next.js** 还提供了静态站点生成的选项，允许你预先生成页面，在构建时将数据整合进HTML。这样做的好处是能够生成可以直接由CDN服务的、快速且成本低廉的页面。
     - 例如，如果我负责一个营销网站，其内容不经常改变，我可能会选择Next.js的静态站点生成功能，以便提供快速的加载时间并减少服务器成本。

3. **路由**：
   - **Next.js** 提供了一个基于文件系统的路由系统，你可以通过在`pages`文件夹中添加JS/TS文件来自动创建路由。这简化了路由的配置。
     - 例如，增加一个名为`about.js`的页面，Next.js会自动将其关联到`/about`这个URL路径。
   - **Create React App** 没有内建的路由系统，通常需要使用像React Router之类的第三方库来处理路由。

4. **构建和启动速度**：
   - **Next.js** 由于其功能更为丰富，可能在构建和启动时比CRA稍微慢一些，特别是在大型项目中。
   - **Create React App** 通常启动得更快，这对于小型项目和原型设计可能更有优势。

5. **设置和配置**：
   - **Next.js** 预设了很多配置，比如Webpack和Babel的配置，这为开发者提供了便利，但同时也可能对想要更细粒度控制的开发者造成限制。
     - 例如，我在工作中使用Next.js进行过一个项目，该项目受益于Next.js的预设配置，我们不需要花太多时间来配置Webpack。
   - **Create React App** 提供一个相对简单的起步体验，但如果你需要自定义配置（如Webpack），你可能需要'eject'，这会暴露所有的配置文件，从而允许更深层次的配置。

6. **API路由**：
   - **Next.js** 提供了API路由的功能，允许你在同一个项目中创建API端点，这对于构建全栈应用非常方便。
     - 举例来说，如果我需要构建一个应用并且希望前端和后端紧密集成，我可以在`pages/api`目录中直接添加API路由，而无需另外创建一个后端服务。

7. **社区和生态**：
   - 虽然这两个
工具各自拥有庞大、活跃的社区，但是由于Next.js提供了更多的内建功能，它的生态系统可能相对于Create React App来说更为复杂且多样化。例如，Next.js社区中包含了更多关于服务端渲染和静态站点生成的最佳实践讨论，同时也有更多针对性能优化、SEO以及API路由管理的资源。

8. **部署和托管**：
   - **Next.js** 设计时就考虑了与Vercel（由同一开发团队维护）的无缝集成，使得部署Next.js应用变得非常简易。尽管如此，Next.js应用也可以部署在其他支持Node.js的平台上。
   - **Create React App** 生成的静态文件可以轻松地部署在任何可以托管静态文件的服务上，如GitHub Pages、Netlify或Vercel等。

9. **开箱即用的功能**：
   - **Next.js** 提供了许多开箱即用的功能，如图片优化（`next/image`）、国际化（i18n）路由、环境变量的支持等。
   - **Create React App** 更专注于提供一个干净、无预设的React环境，这意味着需要额外的工作来集成上述功能。

10. **灵活性与控制**：
    - **Next.js** 在提高开发效率的同时，牺牲了一定程度的灵活性。如果默认的配置不满足需求，可能需要更多时间来理解和修改内部设置。
    - **Create React App** 则提供了一个较为灵活的起点，尤其是在执行`eject`之后，开发者可以对构建等细节有完全的控制。

总结来说，Next.js和Create React App各自适合不同的场景和需求。Next.js更倾向于那些需要服务端渲染、静态站点生成和API路由等全栈特性的复杂应用，而Create React App则可能更适合那些需要快速启动并希望保持较高灵活性的简单客户端应用。选择哪个框架/工具，需要根据项目的具体需求、开发团队的技术栈以及对SEO和性能的考量来决定。

What is the difference between next js and create react app

在Tailwind CSS中，如果您希望建立一个元素填充整个视口的高度，可以使用`h-screen`工具类。这个类的意思是将元素的高度设置为100vh（viewport height，即视口高度）。

例如，如果您有一个容器，您希望它占据整个浏览器窗口的高度，您可以像这样添加类：

```html
<div class="h-screen">
  
</div>
```

这个`div`将会扩展以填满整个视口的高度。

此外，如果您想要一个高度稍微小于100vh的元素，比如考虑到浏览器的地址栏或者底部导航，您可以使用`min-h-screen`来确保元素至少和视口一样高，但可以根据内容的多少变得更高。

如果您需要更细粒度的控制，可以使用`vh`单位和自定义的高度工具类，例如：

```html
<div class="h-[50vh]">
  
</div>
```

这将设置元素的高度为视口高度的50%。

Tailwind CSS提供了响应式的工具类，所以如果您需要在不同的屏幕尺寸下有不同的高度，可以使用前缀来指定：

```html
<div class="h-screen md:h-[75vh] lg:h-[90vh]">
  
</div>
```

在这个例子中，元素默认会占据整个视口的高度，但在中等大小的设备上（md），它的高度将变为视口高度的75%，而在大型设备上（lg），它的高度将变为视口的90%。

总之，使用Tailwind CSS的视口高度工具类是一个快速且响应式的方法来控制元素的高度，确保它们能够适应不同设备的显示需求。

There is a tailwind class named `.h-screen` that translates to `height:100vh;` css. This should work as well. For further details please refer to the [Official Tailwind documentation](https://tailwindcss.com/docs/height/)

You can add `min-h-screen` to the parent `<div>`, this would fill the height of the viewpoint.

And the difference with `h-screen` is that this will stretch over the screen. It would be helpful when the screen is tiny and the content is overflowing with a scrollbar. In this situation the background will not fill the rest of the scrolled-up part.

     <div class="flex items-stretch bg-grey-lighter min-h-screen">
        <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
        <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
        <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
    </div>
    

Link to some snippets at tailwind play (added a background color example to clarify it): [https://play.tailwindcss.com/8Qd822yY4w](https://play.tailwindcss.com/8Qd822yY4w)

You can use `.h-screen` class of [Tailwind CSS](https://tailwindcss.com/docs/height).

I'm using NextJS + tailwindcss. NextJS adds a `<div id="__next">`, so this is what I have in my `global.css`

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    html {
      @apply h-full;
    }
    body {
      @apply h-full;
    }
    div#__next {
      @apply h-full;
    }
    main {
      @apply h-full;
    }
    

And in my page I have

    <main className="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500">
      ...
    </main>

I know it's an old post, but I found it now, while I was trying to have the background color streched to the size of the screen when the content was too little to fill it and avoid to have the background color to stop suddenly when the content was more of the size of the screen (that happens with h-screen). I solved the problem using min-h-screen.

How to fill the height of the viewport with tailwind css

Tailwind CSS 是一个实用工具优先（utility-first）的 CSS 框架，它通过提供数以千计的小型类（如 `text-center`、`mt-4` 等）来帮助开发者快速构建用户界面。在默认情况下，Tailwind 生成的类名是静态的，并且包含在生成的样式表中。然而，开发者可能需要根据程序的状态动态构建这些类名。

在使用 Tailwind CSS 时，可以通过几种方式来动态地构建类名：

1. **JavaScript 模板字符串**：
   如果你正在使用JavaScript来动态生成HTML，或者使用现代的前端框架，比如React、Vue或Angular，你可以使用模板字符串（Template Literals）来根据条件拼接类名。
   
   例如，在React中：

   ```jsx
   function Button({ primary }) {
     const btnClass = `px-4 py-2 border ${
       primary ? 'bg-blue-500 text-white' : 'bg-transparent text-blue-500'
     }`;

     return <button className={btnClass}>Click me</button>;
   }
   ```

   在这个例子中，根据 `primary` 属性的值，按钮的类名会动态变化。

2. **计算属性**：
   在像Vue这样的框架中，可以使用计算属性（computed properties）来动态生成类名。
   
   例如，在Vue中：

   ```vue
   <template>
     <button :class="buttonClass">Click me</button>
   </template>

   <script>
   export default {
     props: ['primary'],
     computed: {
       buttonClass() {
         return {
           'px-4 py-2 border': true,
           'bg-blue-500 text-white': this.primary,
           'bg-transparent text-blue-500': !this.primary,
         };
       }
     },
   };
   </script>
   ```

   在这个例子中，`buttonClass` 计算属性会返回一个对象，其中包含应该应用于按钮的类名。

3. **类名函数**：
   有时，你可能会写一个函数来生成类名，这在任何 JavaScript 环境中都是可行的。
   
   例如：

   ```javascript
   function createButtonClass(size) {
     return `px-4 py-2 text-${size} border`;
   }
   
   const smallButtonClass = createButtonClass('sm');
   const largeButtonClass = createButtonClass('lg');
   ```

4. **Tailwind 插件**：
   Tailwind CSS 允许通过插件扩展其功能。你可以创建自定义插件来根据需要动态生成样式，尽管这通常是在构建过程中完成的，而不是在客户端运行时。

总结一下，虽然你不能在浏览器中直接让 Tailwind 动态产生未在构建时生成的新类名，但你可以使用JavaScript的逻辑来动态地组合已经存在的类名，并根据应用的状态来切换这些类名。这些方法可以让开发者使用 Tailwind 的实用性而不牺牲动态性。

So after finding out that this way of working is not recommended and that JIT doesn't support it (Thanks to the generous commenters). I have changed the approach to a more 'config' based approach.

Basically I define a const with the basic configuration for the different props and apply those to the component. It's a bit more maintenance work but it does the job.

Here is the example of a config. (Currently without typing) and up for some better refactoring but you'll get the idea.

    const buttonConfig = {
      // Colors
      primary: {
        bgColor: 'bg-primary-500',
        color: 'text-white',
        outline:
          'border-primary-500 text-primary-500 bg-opacity-0 hover:bg-opacity-10',
      },
      secondary: {
        bgColor: 'bg-secondary-500',
        color: 'text-white',
        outline:
          'border-secondary-500 text-secondary-500 bg-opacity-0 hover:bg-opacity-10',
      },
    
      // Sizes
      small: 'px-3 py-2',
      medium: 'px-4 py-2',
      large: 'px-5 py-2',
    };
    

Then I just apply the styling like so:

      <motion.button
        whileTap={{ scale: 0.98 }}
        className={`
        rounded-lg font-bold transition-all duration-100 border-2 focus:outline-none
        ${buttonConfig[size]}
        ${outlined && buttonConfig[color].outline}
        ${buttonConfig[color].bgColor} ${buttonConfig[color].color}`}
        onClick={onClick}
        type="button"
        tabIndex={0}
      >
        {children}
      </motion.button>

this way of writing Tailwind CSS classes [is not recommended](https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html). Even [JIT mode doesn't](https://tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support) support it, to quote Tailwind CSS docs: "_Tailwind doesn’t include any sort of client-side runtime, so class names need to be statically extractable at build-time, and can’t depend on any sort of arbitrary dynamic values that change on the client_"

this might be a bit late, but for the people bumping this thread.

the simplest explaination for this is;

**Dynamic Class Name** does not work unless you configured [Safelisting](https://tailwindcss.com/docs/content-configuration#safelisting-classes) for the Dynamic class name,

BUT, **Dynamic Class** works fine so long as its a full tailwind class name.

its stated [here](https://tailwindcss.com/docs/content-configuration#dynamic-class-names)

this will not work

    <div class="text-{{ error ? 'red' : 'green' }}-600"></div>
    

but this one works

    <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
    

its states;

> As long as you always use complete class names in your code, Tailwind will generate all of your CSS perfectly every time.

**the longer explanation;**

Tailwind will scan all the files specified in `module.exports.content` inside `tailwind.config.js` and look for tailwind classes, it does not even have to be in a class attribute and can even be added in commented lines, so long as the **full class name** is present in that file and class name is not dynamically constructed; Tailwind will pull the styling for that class,

so in your case, all you have to do is put in the full class name inside that file for all the possible values of your dynamic class something like this

    <button className={ color === 'primary' ? 'bg-primary-500' : 'bg-secondary-500'}>
        {children}
    </button>
    

or the method I would prefer

    
    <button className={`bg-${color}-500 `}>
        {children}
    </button>
    

here's another example, although its Vue, the idea would be the same for any JS framework

    <template>
        <div :class="`bg-${color}-100 border-${color}-500 text-${color}-700 border-l-4 p-4`" role="alert">
            test
        </div>
    </template>
    <script>
        /* all supported classes for color props 
        bg-red-100 border-red-500 text-red-700
        bg-orange-100 border-orange-500 text-orange-700
        bg-green-100 border-green-500 text-green-700
        bg-blue-100 border-blue-500 text-blue-700
        */
        export default {
            name: 'Alert',
            props: {
                color: {type: String, default: 'red'}
            }
        }
    </script>
    

and the result would be this

    <Alert color="red"></Alert> 
    <Alert color="orange"></Alert> 
    <Alert color="green"></Alert> 
    <Alert color="blue"></Alert> 
    <Alert color="purple"></Alert>

**EDIT**: Better implementation 2022 - [https://stackoverflow.com/a/73057959/11614995](https://stackoverflow.com/a/73057959/11614995)

Tailwind CSS does not support dynamic class names (see [here](https://tailwindcss.com/docs/content-configuration#dynamic-class-names)). However, there's still a way to accomplish this. I needed to use dynamically build class names in my Vue3 application. See the code example below.

Upon build tailwind scanes your application for classes that are in use and automatically purges all other classes ([see here](https://tailwindcss.com/docs/optimizing-for-production)). There is however a `savelist` feature that you can use to exclude classes from purging - aka they will always make it to production.

I have created a sample code below, that I use in my production. It combines each color and each color shade (`colorValues array`).

This array of class names is passed into the `safelist`. Please note, that by implementing this feature you ship more css data to production as well as ship css classes you may never use.

    const colors = require('./node_modules/tailwindcss/colors');
    const colorSaveList = [];
    const extendedColors = {};
    const colorValues = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
    
    for (const key in colors) {
      
    
      // To avoid tailWind "Color deprecated" warning
      if (!['lightBlue', 'warmGray', 'trueGray', 'coolGray',  'blueGray'].includes(key))
      {
        extendedColors[key] = colors[key];
        for(const colorValue in colorValues) {
           colorSaveList.push(`text-${key}-${colorValue}`);
           colorSaveList.push(`bg-${key}-${colorValue}`);
        }
      }
    }
    
    
    module.exports = {
      content: [
        "./index.html",
        "./src/**/*.{vue,js,ts,jsx,tsx}"
      ],
      safelist: colorSaveList,
      theme: {
       extend: {
          colors: extendedColors
       }
      },
      plugins: [
        require('tailwind-scrollbar'),
      ]
    
    }

If someone comes across in 2022 - I took A. Mrózek's answer and made a couple of tweaks to avoid deprecated warnings and an issue with iterating non-object pallettes.

    const tailwindColors = require("./node_modules/tailwindcss/colors")
    const colorSafeList = []
    
    // Skip these to avoid a load of deprecated warnings when tailwind starts up
    const deprecated = ["lightBlue", "warmGray", "trueGray", "coolGray", "blueGray"]
    
    for (const colorName in tailwindColors) {
      if (deprecated.includes(colorName)) {
        continue
      }
    
      const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
    
      const pallette = tailwindColors[colorName]
    
      if (typeof pallette === "object") {
        shades.forEach((shade) => {
          if (shade in pallette) {
            colorSafeList.push(`text-${colorName}-${shade}`)
            colorSafeList.push(`bg-${colorName}-${shade}`)
          }
        })
      }
    }
    
    // tailwind.config.js
    module.exports = {
      safelist: colorSafeList,
      content: ["{pages,app}/**/*.{js,ts,jsx,tsx}"],
      theme: {
        extend: {
          colors: tailwindColors,
        },
      },
      plugins: [],
    }

How to dynamically build classnames in tailwindcss

Tailwind CSS 支持使用 CSS 变量，也称作自定义属性，这使得您能够高效地在项目中使用动态样式值。Tailwind 允许在配置文件中定义这些变量，以及在实际的 CSS 中使用它们。下面是使用 Tailwind CSS 自定义属性的一些步骤和例子：

### 1. 在 Tailwind 配置文件中定义 CSS 变量

首先，您可以在 `tailwind.config.js` 文件中定义自定义属性。例如，您可以为主题颜色定义变量：

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        theme: {
          'primary': 'var(--color-primary)', // 使用 CSS 变量
        },
      },
      // 其他自定义属性，比如字体大小、间距等
    },
  },
}
```

### 2. 在 CSS 文件中设置变量的值

然后，在您的全局 CSS 文件中，您可以设置这些自定义属性的具体值：

```css
/* styles.css */
:root {
  --color-primary: #3490dc;
}

/* 或者使用响应式设计时，可以针对不同断点设置不同的值 */
@media (min-width: 768px) {
  :root {
    --color-primary: #6574cd;
  }
}
```

### 3. 在 HTML 或 JSX 中使用这些类

在定义了变量和它们的值之后，您可以在 HTML 或者其他模板语言中使用这些类：

```html

<button class="bg-theme-primary text-white">
  点击我
</button>
```

### 4. 使用 Tailwind 插件来更方便地处理变量

您也可以使用 Tailwind 插件来更轻松地处理 CSS 变量，例如 `tailwindcss-custom-properties` 插件。

### 实际例子：

假设您正在开发一个主题可切换的网站，您可以定义多组颜色变量，然后通过 JavaScript 切换根元素（`:root`）的类，来实现主题颜色的切换。

```css
/* styles.css */
:root {
  --color-primary: #3490dc;
  --color-secondary: #ffed4a;
}

.dark-mode {
  --color-primary: #4c51bf;
  --color-secondary: #f6ad55;
}
```

```javascript
// theme-switcher.js
function toggleTheme(isDark) {
  const root = document.documentElement;
  if (isDark) {
    root.classList.add('dark-mode');
  } else {
    root.classList.remove('dark-mode');
  }
}
```

使用 CSS 变量，Tailwind CSS 提供了一种强大的机制来创建具有高复用性和动态样式的用户界面，使得您可以在运行时轻松地实现复杂的设计系统。

Now Tailwind supports CSS custom properties as [arbitrary values](https://tailwindcss.com/docs/adding-custom-styles#resolving-ambiguities) since v3.0.

    :root {
      --text-color: red;
      --text-size: 5rem;
    }

    <script src="https://cdn.tailwindcss.com"></script>
    
    <span class="text-[color:var(--text-color)] text-[length:var(--text-size)] font-bold">
      Hello world!
    </span>

Run code snippetHide results

Expand snippet

Armando's answer didn't work for me but with this change it did work.

`global.css`:

no need to target a class or id. you can target the root itself using the Pseudo-Selector [https://www.w3schools.com/cssref/sel\_root.asp](https://www.w3schools.com/cssref/sel_root.asp)

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    :root {
      --primary-color: #fff;
      --secondary-color: #000;
    }
    

as for `tailwind.config.js`:

    module.exports = {
      theme: {
        extend: {
          colors: {
            "primary-color": "var(--primary-color)",
            "secondary-color": "var(--secondary-color)"
          },
        },
      },
    };

Assuming you have already added TailwindCSS to your project and that your CSS file is called `global.css`.

First, you need to edit `global.css` to look like this:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    .root,
    #root,
    #docs-root {
      --primary-color: #fff;
      --secondary-color: #000;
    }
    

And then, in order to be able to use them, you need to update `tailwind.config.js` with the new CSS variables like so:

    module.exports = {
      theme: {
        extend: {
          colors: {
            "primary-color": "var(--primary-color)",
            "secondary-color": "var(--secondary-color)"
          },
        },
      },
    };
    

You can now use these variables as desired:

    <div class="bg-primary-color">
      <h1>Hello World</h1>
    </div>

If you want your variables to work with the opacity modifier syntax, you'll need to defined them as follows:

    :root {
      --color-primary: 255 115 179;
      --color-secondary: 111 114 185;
    }
    

Then use them in your config:

    /** @type {import('tailwindcss').Config} */
    module.exports = {
      theme: {
        colors: {
          // Using modern `rgb`
          primary: 'rgb(var(--color-primary) / <alpha-value>)',
          secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
    
          // Using modern `hsl`
          primary: 'hsl(var(--color-primary) / <alpha-value>)',
          secondary: 'hsl(var(--color-secondary) / <alpha-value>)',
        }
      }
    }
    

Basically, you'll need to convert your hex colors to rgb before you use them. Otherwise, they won't work properly. Here's the link to the documentation: [https://tailwindcss.com/docs/customizing-colors#using-css-variables](https://tailwindcss.com/docs/customizing-colors#using-css-variables)

You can easily configure it using this plugin. (supports darkMode) [https://github.com/mertasan/tailwindcss-variables](https://github.com/mertasan/tailwindcss-variables)

    npm install -D @mertasan/tailwindcss-variables
    

### Usage:

    // tailwind.config.js
    
    module.exports = {
      theme: {
        colors: {
            red: {
                50: 'var(--colors-red-50)'
            }
        }
        variables: {
          DEFAULT: {
            sizes: {
              small: '1rem',
              button: {
                size: '2rem'
              }
            },
            colors: {
              red: {
                50: '#ff3232',
              },
            },
          },
          '.container': {
            sizes: {
              medium: '1.5rem',
            },
          },
        },
      },
      plugins: [
        require('@mertasan/tailwindcss-variables')
      ]
    }
    

**Output:**

    :root {
      --sizes-small: 1rem;
      --sizes-button-size: 2rem;
      --colors-red-50: #ff3232
    }
    
    .container {
      --sizes-medium: 1.5rem
    }

How to use css variables with tailwind css

Tailwind CSS 是一个实用工具优先的 CSS 框架，它允许你用功能类来快速构建设计。在 Tailwind 中，`not` 操作符是一个变体，通常用来表示某个样式仅在其后的类不适用时才应用。换句话说，`not` 操作符允许您创建一个反向选择器，仅在没有指定类时应用样式。

```css
/* 示例: 使用 not 操作符 */
.input:not(.disabled) {
  /* 应用样式，只要元素没有被禁用 */
}
```

在 Tailwind CSS 中，`not` 操作符通常在配置文件中的变体部分启用，以便在构建实用的类时使用。例如，如果你想对非禁用按钮应用某些样式，你需要首先在 `tailwind.config.js` 文件中启用 `not` 操作符：

```javascript
// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      backgroundColor: ['not-disabled'], // 在这里启用 not-disabled 变体
    },
  },
  // ...
};
```

然后，你可以在 HTML 中使用 `not-disabled` 变体来应用样式：

```html
<button class="bg-blue-500 text-white not-disabled:bg-green-500">Button</button>
```

在这个例子中，`not-disabled:bg-green-500` 这个类将应用绿色背景，但仅当按钮没有被禁用时。如果按钮上有 `disabled` 类，则不会应用绿色背景，因为 `not-disabled` 变体表明这个样式应该在没有 `disabled` 类的情况下应用。

The answer is in the link to [`last` in the docs](https://tailwindcss.com/docs/pseudo-class-variants#last-child-v1-1-0), that you shared.

Just add `last:border-b-0` to all list items, and it will remove the `border-bottom` if it is the `last-child`.

    <ul>
      <li
        v-for="(item, index) in items"
        :key="`item-${index}`"
        class="border-solid border-b border-black last:border-b-0"
      >
        Item
      </li>
    </ul>

You can use [Tailwind arbitrary variants](https://tailwindcss.com/docs/adding-custom-styles#arbitrary-variants):

    <li class="[&:not(:last-child)]:border border-sky-500">Item</li>
    

This is available since [Tailwind v3](https://tailwindcss.com/blog/tailwindcss-v3).

We could also do this by selecting the index number we want to edit

EXAMPLE: I will change the first one, and all the following should have a style

    <div
        v-for="(item, i) in items"
        :key="i"
        :class="{ 'mx-0': i === 0, 'mx-4': i > 0 }"
    >
    </div>
    

so the FIRST element has an index from 0, and therefore we will have a margin x 0,

and all of the following would have margin x 4.

How to use not in tailwind css

在TailwindCSS中，`fixed`和`sticky`是用来设置元素定位的实用类。下面我会分别解释它们的用法，并给出一些例子。

### Fixed 定位

`fixed` 属性在 TailwindCSS 中对应的类是 `fixed`，它会将元素的定位设置为固定（fixed），意味着元素会相对于浏览器窗口进行定位，并且即使页面滚动，元素也会停留在设置的位置上。

**例子**：

假设我们想要创建一个固定在视口顶部的导航栏：

```html
<div class="fixed top-0 left-0 right-0">
  
</div>
```

上面的代码将导航栏固定在页面的顶部。`top-0`，`left-0`，和 `right-0` 是 TailwindCSS 中的辅助类，它们分别将导航栏的顶部、左边和右边定位到视口的边缘。

### Sticky 定位

`sticky` 定位是一种混合模式，它可以被看作是 `relative` 和 `fixed` 定位的结合。元素在页面滚动到某个阈值之前会表现得像是 `relative` 定位，滚动到这个阈值之后，元素就会固定在设定的位置。

在 TailwindCSS 中，`sticky` 对应的类就是 `sticky`，通常还需要配合 `top`, `bottom`, `left` 或者 `right` 使用，以确定元素变为 `fixed` 时的具体位置。

**例子**：

如果我们想要创建一个当用户向下滚动页面时，会固定在距离视口顶部20像素的位置的侧边栏：

```html
<div class="sticky top-20">
  
</div>
```

在这个例子中，`top-20` 是一个辅助类，用来设置滚动到离视口顶部20像素时元素变为 `fixed` 的位置。元素默认是 `relative` 定位，当页面滚动到元素的顶部边缘接近视口顶部20像素时，元素就会固定在那里。

总的来说，`fixed` 和 `sticky` 定位是两种常用的CSS定位方法，它们在TailwindCSS中通过相应的实用类很容易实现。使用这些类可以帮助我们快速构建具有固定或粘性定位的用户界面元素。

<div class="flex flex-col h-screen justify-between">
      <header class="h-10 bg-red-500">Header</header>
      <main class="mb-auto h-10 bg-green-500">Content</main>
      <footer class="h-10 bg-blue-500">Footer</footer>
    </div>
    

Class `justify-between` is not required, but I would leave him (for other case).

So, play with `h-screen` and `mb-auto` classes.

And you get this UI:

[![enter image description here](https://i.stack.imgur.com/UvzrW.png)](https://i.stack.imgur.com/UvzrW.png)

Another approach would be using **flex-grow**.

    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>
    
    <div class="flex flex-col h-screen">
        <div class="bg-red-500">header</div>
        <div class="bg-green-500 flex-grow">content</div>
        <div class="bg-blue-500">footer</div>
    </div>

Run code snippetHide results

Expand snippet

New solution in 2022. Tailwindcss version 3.0.24 in codepen demo.

    <div class="min-h-screen">
      <div>Content</div>
      <div class="sticky top-[100vh]">Footer</div>
    </div>
    
    

[codepen demo](https://codepen.io/shrekuu/pen/zYRovQa)

use 'fixed' instead of 'static'

`class="fixed bottom-0"`

Another way that was recently discovered by [Sílvio Rosa](https://www.twitter.com/silvior_) uses `position: sticky` + `top: 100vh` on the footer. The way to achieve this with **TailWindCSS** is...

    <html class="min-h-screen">
      <body class="min-h-screen">
        
        <header>Header</header>
        <main>Content</main>
        <footer class="sticky top-[100vh]">footer</footer>
    
      </body>
    </html>
    

You can read the full article on CSS Tricks [here](https://css-tricks.com/a-clever-sticky-footer-technique/)

How to use fixed sticky in tailwindcss

要使用 TailwindCSS 将 `div` 在屏幕中垂直居中对齐，我们可以利用 Tailwind 提供的 Flexbox 或者 Grid 布局工具类。下面将分别介绍两种方法实现垂直居中对齐。

### 使用 Flexbox

1. 首先，我们需要为父容器添加 `flex` 类来启用 Flexbox 布局。
2. 然后，使用 `items-center` 类可以使子元素在垂直方向上居中。
3. 使用 `justify-center` 类可以使子元素在水平方向上居中。
4. 为了使 Flexbox 布局占满整个屏幕的高度，我们需要添加 `h-screen` 类，这将设置父容器的高度为视口高度。

下面是一个示例代码：

```html

<div class="flex items-center justify-center h-screen">
  
  <div class="bg-blue-500 text-white p-8">
    居中的内容
  </div>
</div>
```

### 使用 Grid

1. 为父容器添加 `grid` 类启用 Grid 布局。
2. 使用 `place-items-center` 类可以同时在垂直和水平方向上居中子元素。
3. 同样，使用 `h-screen` 类设置父容器高度为视口高度。

示例代码如下：

```html

<div class="grid place-items-center h-screen">
  
  <div class="bg-red-500 text-white p-8">
    居中的内容
  </div>
</div>
```

以上两种方法都能够实现在屏幕中垂直和水平居中对齐 `div`。在选择哪种方法实现时，可以根据你的具体布局需求和对Flexbox或Grid布局的熟悉程度做出决定。

可以这么设置 

```
<div class="flex h-screen">
  <div class="m-auto">
    <h3>title</h3>
    <button>button</button>
  </div>
</div>
```

Partly referencing [@mythicalcoder 's solution](https://stackoverflow.com/a/59807846/4957466) but using only the necessary classes provided by TailwindCss (Version 1.8.+):

*   `flex` : To use a flex-div as container
*   `h-screen` : To size the container-height to the viewport height.
*   `justify-center` : To justify center (horizontal center) - _main axis_ - [Doc](https://tailwindcss.com/docs/justify-content)
*   `items-center` : To align the items to center (horizontal center) - _cross axis_ - [Doc](https://tailwindcss.com/docs/align-items)

My Solution to center two text lines:

    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
    
      <div class="flex h-screen justify-center items-center">
        <div class="text-center bg-blue-400"> 
            <h1 class="text-3xl">HEADING</h1>
            <p class="text-xl">Sub text</p>
        </div>
      </div>

Run code snippetHide results

Expand snippet

Justify-Center and Items-Center
-------------------------------

While Anders' answer solves the problem for this particular case, I think it's important to note that using `justify-center` and `items-center` is circumstantial.

Let's have a look at one of the examples from the [tailwind documentation](https://tailwindcss.com/docs/flexbox-justify-content/#center).

    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
    
    <div class="flex justify-center bg-gray-100">
      <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">1</div>
      <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">2</div>
      <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">3</div>
    </div>

Run code snippetHide results

Expand snippet

As we can see the above code centers the elements horizontally. The reason for this is because the justify-center class **centers the element on the flex container's main axis**.

This means that if we were to change the main axis to 'column' then we would get a different result.

    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
    
    <div class="flex flex-col justify-center bg-gray-100">
      <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">1</div>
      <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">2</div>
      <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">3</div>
    </div>

Run code snippetHide results

Expand snippet

Justify-Center and Items-Center centers the elements on the main axis and the cross axis, and they can be used in place of each other. They are the opposites of each other and will produce different results depending on what the current main axis is.

I have tried to summarize different occurrences of centering the `divs`

### Center divs in Column

##### For fit width

      <div class="bg-yellow-400 flex flex-col h-screen justify-center items-center">
        <div className="bg-green-500 p-2">item 1</div>
        <div className="bg-pink-500 p-2">item 2</div>
      </div>
    

[![enter image description here](https://i.stack.imgur.com/2sz5T.png)](https://i.stack.imgur.com/2sz5T.png)

##### For full width

      <div class="bg-yellow-400 flex flex-col h-screen justify-center items-center">
        <div className="bg-green-500 p-2 w-full flex justify-center">
          item 1
        </div>
        <div className="bg-pink-500 p-2 w-full text-center">item 2</div>
      </div>
    

[![enter image description here](https://i.stack.imgur.com/BBtc4.png)](https://i.stack.imgur.com/BBtc4.png)

* * *

### Extra:

##### Center vertically split divs

    <div class="flex h-screen flex-col">
      <div class="flex flex-1 items-center justify-center bg-green-500 p-2 text-4xl">
        <div class="bg-yellow-400 p-6">Item 1</div>
      </div>
      <div class="flex flex-1 items-center justify-center bg-pink-500 p-2 text-4xl"><div class="bg-amber-400 p-6">Item 2</div></div>
    </div>
    
    

[![enter image description here](https://i.stack.imgur.com/dgRgs.png)](https://i.stack.imgur.com/dgRgs.png)

##### Center horizontally split divs

    <div class="flex h-screen">
      <div class="flex flex-1 items-center justify-center bg-green-500 p-2 text-4xl">
        <div class="bg-yellow-400 p-6">Item 1</div>
      </div>
      <div class="flex flex-1 items-center justify-center bg-pink-500 p-2 text-4xl"><div class="bg-amber-400 p-6">Item 2</div></div>
    </div>
    
    

[![enter image description here](https://i.stack.imgur.com/mrCFa.png)](https://i.stack.imgur.com/mrCFa.png)

### Center divs in Row

#### For fit height

    <div>
      <div class="flex h-screen items-center justify-center bg-yellow-400">
        <div class="flex justify-center bg-green-500 p-2">item 1</div>
        <div class="bg-pink-500 p-2 text-center">item 2</div>
      </div>
    </div>
    

[![enter image description here](https://i.stack.imgur.com/tZ3lV.png)](https://i.stack.imgur.com/tZ3lV.png)

#### For full height

    <div>
      <div class="flex h-screen items-center justify-center bg-yellow-400">
        <div class="flex h-full items-center bg-green-500 p-2">item 1</div>
        <div class="flex h-full items-center bg-pink-500 p-2">item 2</div>
      </div>
    </div>
    
    

[![enter image description here](https://i.stack.imgur.com/UCXTh.png)](https://i.stack.imgur.com/UCXTh.png)

According to the question, the "Items1", "Items2" should be both horizontally and vertically aligned.

**Horizontal** => text-center/justify-center

**Vertical** => items-center

Here is a sample code for producing a view similar to the ASCII image in the question.

    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
    
    <div class="relative h-32 bg-blue-400">
      <div class="absolute inset-0 flex items-center justify-center">
        Item 1
        <br>
        Item 2
      </div> 
    </div>

Run code snippetHide results

Expand snippet

How to vertical align div across full screen with tailwind css?

在使用 Tailwind CSS 时，如果您想访问 `div` 的所有子元素并对它们应用样式，您通常会通过在父级 `div` 上使用 Tailwind 的 `@apply` 指令或直接在子元素的类中包含所需的 Tailwind 类。但是，Tailwind 默认并没有提供直接针对所有子元素的工具类。

虽然没有直接的工具类，但您可以通过写自定义的 CSS 结合 Tailwind 的工具类，来实现对所有子元素的控制。这通常是在您的项目的CSS文件中通过使用标准的CSS选择器来完成的。

以下是如何在自定义CSS中使用Tailwind类来访问和样式化`div`的所有子元素的示例：

```css
/* 在您的项目的 CSS 文件中 */
.parent > * {
  @apply text-base p-4 border border-gray-300;
}
```

在这个例子中，`.parent > *` 选择器选中了类名为 `parent` 的 `div` 的直接子元素，并且应用了基本的文本大小 (`text-base`)、内填充 (`p-4`) 和边框样式 (`border border-gray-300`)。这样，所有直接子元素都会有统一的样式。

另外，如果您正在使用 Tailwind CSS v2.1 或更高的版本，并且启用了 JIT 模式，您可以使用 `@variants` 指令来生成响应不同状态变化的工具类。例如：

```css
@variants responsive, hover, focus {
  .parent > * {
    @apply text-base p-4 border border-gray-300;
  }
}
```

在这个例子中，我们生成了样式在不同屏幕尺寸（响应式设计）、悬停和聚焦时的变种。

请注意，直接在HTML上大量地定制化样式可能违背了 Tailwind CSS 的实用主义原则，因此建议仅在确实需要时这样做，并且要注意维护性和性能。在可能的情况下，最好是为子元素添加特定的类以利用 Tailwind 的实用类。

In tailwind 3.1, you can use arbitrary values to target child elements.

    <div class="[&>*]:p-4">...</div>
    <div class="[&>p]:mt-0 ">...</div>
    

[https://tailwindcss.com/blog/tailwindcss-v3-1#arbitrary-values-but-for-variants](https://tailwindcss.com/blog/tailwindcss-v3-1#arbitrary-values-but-for-variants)

As mentioned by @kca in the comments, space in the selectors need to be replaced by an underscore character in Tailwind classes. For example if you want to select all descendants, not just the direct children then you can use this:

    <div class="[&_*]:p-4">...</div>
    <div class="[&_p]:mt-0 ">...</div>

There are three options these days.

Option 1 - Plugins
------------------

You could use these simple lines in `tailwind.config.js` to give you `child` and `child-hover` options.

    plugins: [
        function ({ addVariant }) {
            addVariant('child', '& > *');
            addVariant('child-hover', '& > *:hover');
        }
    ],
    

Then use like this

    <div class="child:text-gray-200 child-hover:text-blue-500">...</div>
    

Which will give every child a gray textcolor, and a blue one on hover.

See [here](https://tailwindcss.com/docs/plugins#adding-variants) for more information on adding variants using a plugin

Option 2 - Ad-hoc selectors
---------------------------

Since 4th of july 2022, Tailwind added an ad-hoc approach to target specific elements. You can now use the below without any need for plugins.

    <div class="[&>*]:text-gray-200 [&>*:hover]:text-blue-500">...</div>
    

See the answer of @phum for more info!

Option 3 - Native child selectors
---------------------------------

Since 19th of december 2023, Tailwind added child selectors! You can now use the below.

    <div class="*:text-gray-200 hover:*:text-blue-500">...</div>
    

See [here](https://tailwindcss.com/blog/tailwindcss-v3-4) for the release notes.

If you want to access the direct children of div with selector, please use `@layer` directive. see below:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    @layer base {
      div.section > div {
        @apply text-xl;
      }
    }
    

[https://tailwindcss.com/docs/adding-base-styles](https://tailwindcss.com/docs/adding-base-styles)

This is currently not possible and probably won't be implemented soon.

Instead, I recommend using this plugin: [https://github.com/benface/tailwindcss-children](https://github.com/benface/tailwindcss-children). Follow the README for further instructions.

### Usage:

After you have installed the plugin and added it to your `tailwind.config.js`, you can access direct children by adding `children:{your_style}` to the parent class. If you for example would want to add `p-4` to `header` and `content`, your code would look like this:

    <div class="section children:p-4">
       <div class="header">header</div>
       <div class="content">
          <div>sub contents 1</div>              
          <div>sub contents 2</div>
       </div>
    </div>

This is tailwind v1&v2 version of Willem Mulder's.

only change is variant name `children` instead of `child`

     plugin(function({ addVariant, e }) {
    
      addVariant('children', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          const newClass = e(`children${separator}${className}`);
          return [
            `.${newClass} > *`,
            // `.${newClass}:hover `,
          ].join(",");
        });
      });
    
      addVariant('children-first', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          const newClass = e(`children-first${separator}${className}`);
          return [
            `.${newClass} > *:first-child`,
          ].join(",");
        });
      });
    
    }),
    

add variants for padding

    variants: {
        padding: ['responsive', 'children', 'children-hover', 'children-first', ],
       
      },

How to access all the direct children of a div in tailwindcss

在 Tailwind CSS 中，可以通过几种方式使用 CSS 的 `calc()` 函数来创建动态的属性值。这包括内联样式、自定义 CSS 类和使用 Tailwind 的 Arbitrary Values 功能。以下是如何在 Tailwind CSS 中使用 `calc()` 函数的详细指导：

### 结合 Tailwind CSS 配置 

在 Tailwind CSS 的配置文件中添加自定义宽度：

```javascript
// tailwind.config.js
module.exports = {
  // ...
  theme: {
    extend: {
      width: {
        'calc-example': 'calc(100% - 2rem)',
      },
    },
  },
  // ...
};
```

然后在 HTML 中使用这个新的配置类： 

```html
<div class="w-calc-example ...">
  
</div>
```

### 使用 Tailwind 的 Arbitrary Values

Tailwind 支持在类名中使用方括号 `[]` 来内联写入任意值（包括 `calc()` 函数）：

```html
<div class="w-[calc(100%_-_2rem)] ...">
  
</div>
```

注意，在 `calc()` 内部的空格需要使用下划线 `_` 来表示，这是因为在 Tailwind CSS 中使用 Arbitrary Values 时，如果值包含空格或其他特殊字符，则必须适当转义它们。

以上就是在 Tailwind CSS 中使用 `calc()` 函数的几种方法。使用 `calc()` 时，请确保在操作符号前后留有空格，以避免解析错误。

不要在calc中加空格

```
class="w-[calc(100%+2rem)]"
```

输出内容:

```
.w-\[calc$100\%\+2rem$\] {
  width: calc(100% + 2rem);
}
```

或者可以使用下划线代替空白

```
<script src="https://cdn.tailwindcss.com"></script>
<div class="h-20 w-[calc(100%_-_10rem)] bg-yellow-200"></div>
```

我们也可以使用主题变量

```
h-[calc(100%-theme(space.24))]
```

### [theme()](https://tailwindcss.com/docs/functions-and-directives#theme)

使用theme()函数使用点表示法访问Tailwind配置值。

当您希望仅为声明的一部分引用主题配置中的值时，这可能是@apply的有用替代方案

```
.content-container {
  height: calc(100vh - theme('spacing.7'));
}
```

How to use calc in tailwind css

在使用Tailwind CSS时，通常不需要在CSS检查器（如浏览器开发者工具中的样式编辑器）中直接添加自定义规则，因为Tailwind是一个工具类优先的框架，您可以通过在HTML标签中直接添加类名来应用样式。然而，如果您需要在项目中使用Tailwind CSS以外的自定义CSS样式或者需要对现有的Tailwind样式进行调整，通常有几种方法可以做到这一点：

1. **使用Tailwind CSS的配置文件**：这是扩展或自定义Tailwind样式的首选方法。在`tailwind.config.js`文件中，您可以扩展现有的样式或添加新的自定义样式。例如，如果您想要添加一个新的间距规则，可以在配置文件中这样做：

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      }
    }
  }
}
```

这将添加新的间距类，例如`mt-72`, `mt-84`, 和 `mt-96`，可在项目中直接使用。

2. **使用@apply指令**：在您的CSS文件中，您可以使用Tailwind提供的`@apply`指令来应用工具类的样式到自定义的CSS类中。这允许您将Tailwind的实用程序类应用到CSS中，然后在HTML中使用这个自定义类。例如：

```css
/* custom.css */
.btn-custom {
  @apply text-white bg-blue-500 hover:bg-blue-700;
}
```

然后，在HTML中，您可以使用`<button class="btn-custom">Click me</button>`来应用这些样式。

3. **直接在CSS中编写**：如果你更愿意直接操作CSS或需要添加一些Tailwind没有覆盖的复杂样式，你可以在CSS文件中直接添加它们。例如：

```css
/* custom.css */
.custom-rule {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
```

然后在HTML中用`class="custom-rule"`来使用这个规则。

4. **浏览器的CSS检查器**：如果您只是想在开发过程中暂时测试一些样式更改，可以使用浏览器的CSS检查器。右键单击您想要调整的元素，选择“检查”(Inspect)，然后在元素的样式面板中添加或修改样式。但是，这种方法的变化只存在于您当前的浏览器会话中，刷新页面后更改会丢失，因此，最终您还是需要将更改反映到您的源代码中。

尽管如此，最佳实践是尽量利用Tailwind CSS的配置和类系统来管理您的样式，因为这有助于保持项目的一致性和可维护性。直接在开发者工具中添加或调整样式通常是用于快速调试或实验的临时手段，并不适合长期的代码维护。

If you use Visual Studio Code, you can use the [PostCSS Language Support](https://marketplace.visualstudio.com/items?itemName=csstools.postcss) plugin.

Make sure you associate your `scss` files with PostCSS by adding the following to your `settings.json` file: `"files.associations": { "*.scss": "postcss" }`.

2022-05 Update
==============

The official [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension now extends the built-in CSS language mode to fix these lint warnings, without losing any of VS Code’s default IntelliSense features.

Review the [Recommended VS Code Settings](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss#recommended-vs-code-settings) section to enable this for all CSS files in your workspace.

I leave my original answer intact below if you don’t want to install an additional extension, but since v0.8.0 it no longer conflicts with the built-in CSS support so that would be my recommended approach.

* * *

Old Answer Without Extension
============================

Visual Studio Code allows you to define [Custom Data for CSS Language Service](https://github.com/Microsoft/vscode-css-languageservice/blob/master/docs/customData.md).

For example, in your workspace’s `.vscode/settings.json` you can add:

    {
      "css.customData": [".vscode/css_custom_data.json"]
    }
    

And then in `.vscode/css_custom_data.json` add:

    {
      "atDirectives": [
        {
          "name": "@tailwind",
          "description": "Use the @tailwind directive to insert Tailwind’s `base`, `components`, `utilities`, and `screens` styles into your CSS.",
          "references": [
            {
              "name": "Tailwind’s “Functions & Directives” documentation",
              "url": "https://tailwindcss.com/docs/functions-and-directives/#tailwind"
            }
          ]
        }
      ]
    }
    

Note that you may have to reload the VS Code window for the change to be picked up.

Here is a copy of `.vscode/css_custom_data.json`, which contains all directives with short usage snippets (which in turn get syntax highlighted in vs code):

    {
      "version": 1.1,
      "atDirectives": [
        {
          "name": "@tailwind",
          "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
          "references": [
            {
              "name": "Tailwind Documentation",
              "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
            }
          ]
        },
        {
          "name": "@responsive",
          "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
          "references": [
            {
              "name": "Tailwind Documentation",
              "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
            }
          ]
        },
        {
          "name": "@screen",
          "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
          "references": [
            {
              "name": "Tailwind Documentation",
              "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
            }
          ]
        },
        {
          "name": "@variants",
          "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
          "references": [
            {
              "name": "Tailwind Documentation",
              "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
            }
          ]
        }
      ]
    }
    

Here's a preview of the result:

[![preview of @screen directive](https://i.stack.imgur.com/t37TS.png)](https://i.stack.imgur.com/t37TS.png)

The only directive missing is `@apply`, because it's declared at the CSS property level. The _CSS Language Service_ probably doesn't expect `atRules` at the property level and won't pick up such directives.

This is the at-rule-no-unknown rule provided by Visual Studio Code's built-in list.

In order to get rid of it you need to do the following:

**1**. Install the Stylelint extension `code --install-extension stylelint.vscode-stylelint`

**2**. Install the Stylelint recommended configuration `npm install stylelint-config-recommended --save-dev`

**3**. Add these two lines in your Visual Studio Code USER SETTINGS

    "css.validate": false, // Disable default CSS built-in lint
    "stylelint.enable": true, // Enable Stylelint
    "scss.validate": false, // Disable SCSS lint (optional if using scss)
    

**4**. Paste these lines into a file called `.stylelintrc` in your project's root directory; create it if it does not exist. More information about Stylelint's configuration follow this link: [https://stylelint.io/user-guide/](https://stylelint.io/user-guide/)

    {
      "extends": "stylelint-config-recommended",
      "rules": {
        "at-rule-no-unknown": [ true, {
          "ignoreAtRules": [
            "extends",
            "tailwind"
          ]
        }],
        "block-no-empty": null,
        "unit-allowed-list": ["em", "rem", "s"]
      }
    }

### Currently Recommended Visual Studio Code Settings (Updated 2022-12-15)

**Official Tailwind CSS IntelliSense Visual Studio Code Documentation**

Use the _files.associations_ setting to tell Visual Studio Code to always open .css files in Tailwind CSS mode:

        "files.associations": {
          "*.css": "tailwindcss"
        }
    

Tip: Press Ctrl + , from Visual Studio Code to open Settings; then, type _"Files Associations"_.

By default Visual Studio Code will not trigger completions when editing "string" content, for example within JSX attribute values. Updating the _editor.quickSuggestions_ setting may improve your experience:

        "editor.quickSuggestions": {
          "strings": true
        }
    

Combining both, your _[settings.json](https://stackoverflow.com/questions/65908987/how-can-i-open-visual-studio-codes-settings-json-file)_ file (if new) will look similar to this:

        {
            "files.associations": {
              "*.css": "tailwindcss"
            },
            "editor.quickSuggestions": {
                "strings": true
            }
        }
    

Source: _[Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)_

* * *

### Previously Recommended Visual Studio Code Settings (Deprecated)

Visual Studio Code has built-in CSS validation which may display errors when using Tailwind CSS-specific syntax, such as @apply. You can disable this with the _css.validate_ setting:

    "css.validate": false
    

The "editor.quickSuggestions" setting recommendation remains the same then and now. Combining both, your _settings.json_ file (if new) would look similar to this:

    {
        "css.validate": false,
        "editor.quickSuggestions": {
            "strings": true
          }
    }

**1.** Just go to settings (Ctrl + , for a shortcut).

**2.** Search for CSS in the search bar.

**3.** look for the _"CSS > Lint: Unknown At Rules"_

**4.** Select "ignore" from the dropdown options.

This ignores the warning. If you're OK with it.

How to add a tailwind css rule to css checker

在TypeORM中，当您需要构建一个查询并且想要使用“OR”运算符来组合不同的查询条件时，可以使用`Where`语句的多种方法来实现。以下是几种使用“OR”运算符的方法：

### 使用 `Where` 对象

您可以通过`Where`对象构建的查询使用`orWhere`方法，例如:

```typescript
import { getRepository } from 'typeorm';
import { User } from './entity/User';

const userRepository = getRepository(User);

userRepository
  .createQueryBuilder('user')
  .where('user.firstName = :firstName', { firstName: 'John' })
  .orWhere('user.lastName = :lastName', { lastName: 'Doe' })
  .getMany();
```

在上面的例子中，我们首先对`user.firstName`进行了过滤，然后使用`orWhere`方法增加了一个条件，即`user.lastName`。这两个条件将用“OR”运算符组合。

### 使用 `find` 方法与 `FindOptions`

在使用TypeORM的`find`方法时，可以通过传递`FindOptions`对象，并在其中指定`where`属性，该属性可以是一个条件数组，TypeORM将使用“OR”将它们组合起来：

```typescript
import { getRepository } from 'typeorm';
import { User } from './entity/User';

const userRepository = getRepository(User);

userRepository.find({
  where: [
    { firstName: 'John' },
    { lastName: 'Doe' }
  ]
});
```

在这个例子中，`where`属性接受了一个条件数组，每一个对象代表一个条件，TypeORM将使用“OR”逻辑将这些条件组合在一起。

### 使用 `Brackets` 对象

使用`Brackets`对象可以创建更加复杂的“OR”查询，允许您嵌套查询条件，例如：

```typescript
import { getRepository, Brackets } from 'typeorm';
import { User } from './entity/User';

const userRepository = getRepository(User);

userRepository
  .createQueryBuilder('user')
  .where(new Brackets(qb => {
    qb.where('user.firstName = :firstName', { firstName: 'John' })
      .orWhere('user.lastName = :lastName', { lastName: 'Doe' })
  }))
  .getMany();
```

在这个例子中，通过使用`Brackets`对象，我们创建了一个嵌套的查询条件，这允许我们在复杂查询时有更灵活的控制。

总结一下，TypeORM提供了多种方式来使用“OR”运算符。您可以根据查询的复杂性和个人喜好选择合适的方法。在实际应用中，根据查询的具体需求来选择使用`orWhere`方法、`find`方法结合`FindOptions`，或者是`Brackets`对象以构建更复杂的查询逻辑。

```js
db.getRepository(MyModel).find({
  where: [
      { name: "john" },
      { lastName: "doe" }
  ]
})
```

将数组传递给 `where`即可实现要求

可以通过执行以下操作将“OR”子句与“AND”结合起来。

```
db.getRepository(MyModel).find({
  where: [
      { name: "john", lastName: "doe" },
      { age: 20 }
  ]
})
```

最终执行SQL语句如下

```sql
select * from model where (name = "john" and lastname = "doe") OR age = 20
```

我遇到了同样的问题，但我使用[QueryBuilder](http://typeorm.io/#/select-query-builder)解决了这个问题。

这就是一个例子。

    return await getRepository(MyModel)
      .createQueryBuilder()
      .where("name = :name OR lastName = :lastName", {
        name: "john",
        lastName: "doe"
      })
      .getMany();

要`OR`在 中使用`sub-clause`，我必须重复`main-clause`

    userRepository.find({
      where: [
        {
          firstName: 'Timber',
          lastName: 'Saw',
          project: {
            name: 'TypeORM',
          },
        },
        {
          firstName: 'Timber',
          lastName: 'Saw',
          project: {
            initials: 'TORM',
          },
        },
      ],
    });
    
    

查找所有`Timber Saw`带有`name = "TypeORM"` 或 的项目`initials = "TORM"`

从版本[0.3.18](https://github.com/typeorm/typeorm/blob/master/CHANGELOG.md#0318-2024-01-03)（2024-01-03 发布）开始，TypeORM 现在支持`Or`基本 .find\* 方法中的运算符：

    const users = await db.getRepository(User).findBy({
        name: Or(Equal("John"), ILike("Jane%")),
    })
    

    -- Will generate the following query:
    SELECT * FROM "user" WHERE "name" = 'John' OR "name" ILIKE 'Jane%'
    

不幸的是，这并不能解决您提出的场景，而只能解决仅涉及一个字段的情况。但它可能对其他用户仍然有用。

在 TypeScript 中，你可以使用多种方法来动态地为对象分配属性。以下是几种不同的方法：

### 方法 1: 使用索引签名
如果你提前知道属性的类型，但不知道属性的名称，你可以使用索引签名来定义一个对象，这个对象可以接受任意名称的属性。

```typescript
// 定义一个索引类型
interface DynamicObject {
  [key: string]: any; // 可以使用 string, number, symbol
}

// 创建一个动态对象
const obj: DynamicObject = {};

// 动态添加属性
obj['newProperty'] = 'New Value';
obj.dynamicField = 123;

console.log(obj);
```

### 方法 2: 使用泛型和 keyof
如果你有一个特定的对象类型，并且想要添加或修改这个类型的属性，你可以使用泛型和 `keyof`。

```typescript
type KnownObject = {
  existingProperty: string;
};

function setProperty<T, K extends keyof any, V>(
  obj: T,
  key: K,
  value: V
): T & Record<K, V> {
  return {
    ...obj,
    [key]: value,
  };
}

const knownObj: KnownObject = { existingProperty: 'Hello' };

const updatedObj = setProperty(knownObj, 'dynamicProperty', 456);

console.log(updatedObj);
```

### 方法 3: 使用 Object.assign()
`Object.assign()` 方法可以用来复制一个或多个源对象的所有可枚举自有属性到目标对象，返回目标对象。

```typescript
const obj: {[key: string]: any} = {};

Object.assign(obj, { dynamicProperty: 'Dynamic' });

console.log(obj);
```

### 方法 4: 使用扩展运算符（Spread Operator）
扩展运算符可以用来将现有对象的属性复制到新对象中，并添加新的属性。

```typescript
const obj = {};

const newProperty = 'dynamic';
const newObj = {
  ...obj,
  [newProperty]: 'Value',
};

console.log(newObj);
```

### 总结
以上是在 TypeScript 中动态分配对象属性的几种方法。在实际使用时，需要根据你的具体需求来选择合适的方法。使用索引签名和 `Object.assign()` 通常更灵活，而使用泛型和 `keyof` 可以为类型安全提供更强的保障。

How to using or operator in typeorm?

在NestJS中使用TypeORM实现分页查询通常会涉及以下几个步骤：

1. **创建数据访问服务**：首先，你需要在服务中创建一个方法来处理查询逻辑。

2. **接收分页参数**：你需要从客户端接收分页参数，通常是`page`和`limit`，其中`page`表示当前页码，`limit`表示每页显示的条目数。

3. **计算跳过的条目数量**：根据分页参数，计算`skip`值，即你需要跳过的条目数。这可以通过`(page - 1) * limit`来计算。

4. **执行查询并返回结果**：使用TypeORM提供的`findAndCount`或`createQueryBuilder`方法来执行分页查询，并计算总条目数。

下面是一个具体的例子：

```typescript
import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { YourEntity } from './entities/your.entity';

@Injectable()
export class YourService {
  constructor(
    @InjectRepository(YourEntity)
    private readonly yourEntityRepository: Repository<YourEntity>,
  ) {}

  async paginate(page: number = 1, limit: number = 10) {
    // 计算需要跳过的条目数量
    const skip = (page - 1) * limit;

    // 执行查询并返回结果和总条目数
    const [results, total] = await this.yourEntityRepository.findAndCount({
      take: limit,
      skip: skip,
      // 可以添加其他的查询条件和排序
      // where: { ... },
      // order: { ... },
    });

    // 返回分页结果和其他分页信息
    return {
      data: results, // 当前页的数据
      count: total, // 总条目数
      currentPage: page, // 当前页码
      totalPages: Math.ceil(total / limit), // 总页数
    };
  }
}
```

在这个例子中，服务`YourService`中的`paginate`方法接收两个参数`page`和`limit`，它们分别对应于客户端请求的当前页码和每页的条目数量。方法内部，使用`findAndCount`来执行查询，同时计算总条目数。最后，返回一个对象，包含当前页的数据、总条目数、当前页码和总页数。

在实际应用中，你可能还需要处理边界情况，比如确保页码和每页条目数是正数，以及页码不超过总页数等。此外，还可以根据需要添加排序和过滤条件，来满足具体的业务需求。

简而言之，`typeorm`有一个专门针对分页查询的用例的非常好的方法 `findAndCount`。

```
async findAll(query): Promise<Paginate> {
    const take = query.take || 10
    const skip = query.skip || 0
    const keyword = query.keyword || ''

    const [result, total] = await this.userRepository.findAndCount(
        {
            where: { name: Like('%' + keyword + '%') }, order: { name: "DESC" },
            take: take,
            skip: skip
        }
    );

    return {
        data: result,
        count: total
    }
}
```

该中间件检查 URL 中是否有 take 和skip 参数，如果有，它会从字符串转换为数字，如果不使用默认值。10 表示拍摄，0 表示跳过。

take 是每页和跳过的结果数，从哪里开始读取记录。 

这样，我就设置了仅针对 GET 方法拦截“产品/分页”路由。

这样我就可以在控制器中检索这些值并将其传递给 TypeORM 或 SQL 查询。

[![文件夹](https://i.stack.imgur.com/fAZAv.png)](https://i.stack.imgur.com/fAZAv.png)

```
@Injectable()
export class PagerMiddleware implements NestMiddleware {
  use(req: any, res: any, next: () => void) {
    req.query.take = +req.query.take || 10;
    req.query.skip = +req.query.skip || 0;
    next();
  }
}
```

模块中应用 
===========

```
export class AdminFeatureApi implements NestModule {
  configure(consumer: MiddlewareConsumer) {
    consumer.apply(PagerMiddleware)
    .forRoutes({ path: 'product/paged', method: RequestMethod.GET })
  }
}
```

控制器
======

```
@Controller('product')
export class TrainingDomainController {
  constructor(private service: YourService) {}

  @Get('paged')
  get(@Query() { take, skip }) {
    return this.service.findAll(take, skip);
  }
}
```

服务
====

```
@Injectable()
export class YourService {
  constructor(
    @InjectRepository(YourEntity)
    private readonly repo: MongoRepository<YourEntity>
  ) {}

  async findAll(take: number = 10, skip: number = 0) {
    const [data, total] = await this.repo.findAndCount({ take, skip });
    return { data, total };
  }
}
```

好的？

我更喜欢使用页面而不是直接跳过

*   端点示例：`/users?page=4&take=3`
    
        async findAll(query): Promise<Paginate> {
            const take = query.take || 10
            const page=query.page || 1;
            const skip= (page-1) * take ;
            const keyword = query.keyword || ''
        
            const [result, total] = await this.userRepository.findAndCount(
                {
                    where: { name: Like('%' + keyword + '%') }, order: { name: "DESC" },
                    take: take,
                    skip: skip
                }
            );
        
            return {
                data: result,
                count: total
            }
        }
        
    
    2/. 更好的方法（处理响应）：
    
         async findAll(query): Promise<Paginate> {
             const take= query.take || 10
             const page=query.page || 1;
             const skip= (page-1) * take ;
             const keyword = query.keyword || ''
        
             const data = await this.userRepository.findAndCount(
                 {
                     where: { name: Like('%' + keyword + '%') }, order: { name: "DESC" },
                     take: take,
                     skip: skip
                 }
             );
             return paginateResponse(data ,page,take)
        
         }
        
    
        export function paginateResponse(data,page,limit) {
          const [result, total]=data;
          const lastPage=Math.ceil(total/limit);
          const nextPage=page+1 >lastPage ? null :page+1;
          const prevPage=page-1 < 1 ? null :page-1;
          return {
            statusCode: 'success',
            data: [...result],
            count: total,
            currentPage: page,
            nextPage: nextPage,
            prevPage: prevPage,
            lastPage: lastPage,
          }
        }

您还可以查看 NestJS 和 TypeORM 的这个包：

[https://github.com/nestjsx/nestjs-typeorm-paginate](https://github.com/nestjsx/nestjs-typeorm-paginate)

有 2 个可以满足条件的方法：

**createQueryBuilder** 和 **findAndCount**

```
const userRepository = dataSource.getRepository(User);
const _take = query.take || 10;
const _skip = query.skip || 0;
```

使用**createQueryBuilder**

```
const qb = await dataSource
    .getRepository(User)
    .createQueryBuilder("user")
    .orderBy("user.id", "DESC")
    .take(_take)
    .skip(_skip);

    const users = await qb.getMany();
    const total = await qb.getCount();
```

使用**findAndCount**。通过这种方法，您只需一次调用即可获得全部结果。

```
const [users, total]  = await userRepository.findAndCount({
        order: {
            id: 'DESC'
        }
        skip: _skip,
        take: _take
});
```

How to implement pagination in nestjs with typeorm?

在 NestJS 中使用日志服务可以通过多种方式实现，最常见的是使用 NestJS 内置的日志器（Logger）服务，或者集成第三方日志库（如 Winston 或 Pino）。以下是如何在 NestJS 中使用内置的 Logger 服务以及集成 Winston 作为日志服务的基本步骤。

### 使用 NestJS 内置 Logger 服务

1. **导入 Logger 服务：** NestJS 提供了一个内置的 `Logger` 类，您可以在任何服务或控制器中直接使用它。
   ```typescript
   import { Logger } from '@nestjs/common';
   ```

2. **实例化 Logger：** 在您的服务或控制器中创建一个 Logger 实例。
   ```typescript
   private readonly logger = new Logger(MyService.name);
   ```

3. **使用 Logger：** 现在可以在类的任何方法中使用这个 logger 来记录日志。
   ```typescript
   someMethod() {
     this.logger.log('Some informative message');
     this.logger.error('An error occurred', error.stack);
     this.logger.warn('A warning message');
     this.logger.debug('Some debug information');
   }
   ```

4. **自定义 Logger：** 如果需要更改日志级别或自定义日志行为，可以通过继承 `Logger` 类并重写其方法来完成。
   ```typescript
   import { Logger, Injectable, Scope } from '@nestjs/common';

   @Injectable({ scope: Scope.TRANSIENT })
   class MyLogger extends Logger {
     // 自定义日志的逻辑
   }
   ```

### 集成第三方日志库（以 Winston 为例）

1. **安装 Winston 相关依赖：**
   ```sh
   npm install winston @nestjs/common @nestjs/core
   ```

2. **创建一个 Winston 模块：** 创建一个模块来封装 Winston 的配置和提供器。
   ```typescript
   import { Module } from '@nestjs/common';
   import { WinstonModule } from 'nest-winston';
   import * as winston from 'winston';

   @Module({
     imports: [
       WinstonModule.forRoot({
         // Winston 的配置
         transports: [
           new winston.transports.Console(),
           // 其他 transports 如文件或远程日志服务
         ],
       }),
     ],
     exports: [WinstonModule],
   })
   export class LoggerModule {}
   ```

3. **在应用中使用 Winston：** 在其他模块中导入 `LoggerModule` 并在服务中注入 `WINSTON_MODULE_PROVIDER` 作为日志器。
   ```typescript
   import { Inject, Injectable } from '@nestjs/common';
   import { Logger } from 'winston';
   import { WINSTON_MODULE_PROVIDER } from 'nest-winston';

   @Injectable()
   class MyService {
     constructor(
       @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger
     ) {}

     someMethod() {
       this.logger.info('Some informative message');
       this.logger.error('An error occurred');
     }
   }
   ```

### 使用自定义的日志级别和格式

NestJS 的内置日志器或第三方日志库允许您定义自定义的日志级别和格式。这可以通过修改配置来实现，例如，在使用 Winston 时，您可以自定义 `transports` 和 `format` 选项以改变日志的输出格式和目的地。

```typescript
transports: [
  new winston.transports.Console({
    format: winston.format.combine(
      winston.format.timestamp(),
      winston.format.printf(info => `${info.timestamp} ${info.level}: ${info.message}`)
    ),
  }),
  // 其他 transports
]
```

在实际生产环境中，您可能还需要考虑日志的持久化存储、日志的分析、监控警报等高级功能，这通常需要与相关的基础设施和服务集成，如 ELK（Elasticsearch, Logstash, Kibana）堆栈、AWS CloudWatch、GCP Stackdriver 等。

以上是在 NestJS 中使用日志服务的一些基础步骤和实践，当然根据具体的业务需求和系统复

最佳实践
----

比静态访问更好的[`Logger`](https://docs.nestjs.com/techniques/logger)是为您的类创建一个实例：

    @Controller()
    export class AppController {
      private readonly logger = new Logger(AppController.name);
    
      @Get()
      async get() {
        this.logger.log('Getting stuff');
      }
    }
    

* * *

为什么这样更好？
--------

1.  您可以在构造函数中提供上下文，`new Logger(AppController.name)`以便类名（或其他任何内容）将成为此类中所有日志消息的一部分。
    
2.  如果您在某些时候想要扩展或替换默认值`LoggerService`，除了设置新记录器之外，您不需要更改任何应用程序代码。您的新记录器将自动被使用。如果您静态访问它，它将继续采用默认实现。
    

    const app = await NestFactory.create(AppModule, {logger: new MyLogger()});
    

3.  `Logger`您可以在测试中模拟：

    module.useLogger(new NoOpLogger());

首先需要将 Logger 导入到您的 Class 中：

```
import { Logger } from '@nestjs/common';
```

然后就可以开始记录日志：

```
Logger.log('info')
Logger.warn('warning')
Logger.error('something went wrong! ', error)
```

最佳实践是注入现有的记录器。

_`app.module.ts`_

    import { Logger, Module } from '@nestjs/common';
    import { AppController } from './app.controller';
    import { AppService } from './app.service';
    
    @Module({
      imports: [],
      controllers: [AppController],
      providers: [AppService, Logger],
    })
    export class AppModule {}
    

并在_app.service.ts中_

    import { Injectable, Logger } from '@nestjs/common';
    
    @Injectable()
    export class AppService {
      constructor(private readonly logger: Logger) {}
    
      sayHello() {
        this.logger.log('Hello world!') 
      }
    }

这个答案可能对尝试使用 CustomLogger 实现的其他人有用。我试图展示一个示例自定义记录器实现以及如何将其注入到 Nestjs 框架中。

据我所知，Nestjs 本质上使用 pino 记录器。这只是记录器服务的自定义实现（您可以用bunyan、winston 等替换它。）这是我使用的文件夹结构：

    > src /  
    >   modules /
    >      database /
    >        ...
    >        database.module.ts
    >      api /
    >        services /
    >        controllers /
    >        interceptors /
    >        middlewares /
    >        models /
    >        schemas /
    >      shared /
    >        services /
    >           app.util.service.ts
    >           pino.logger.service.ts
    >        utils / 
    >        interceptors /
    >        filters /
    >        main.ts    
    >        app.controller.ts    
    >        app.service.ts
    >        server.util.service.ts 
    

这是它的主要要点。所以logger服务的实现如下

    import {Injectable, LoggerService, Scope} from "@nestjs/common";
    import * as pino from 'pino';
    import {AppUtilService} from "./app.util.service";
    import * as os from "os";
    import {APP_LOG_REDACT, APP_MESSAGE_KEY} from "../utils/app.constants";
    
        @Injectable({
            scope: Scope.DEFAULT
        })
        export class PinoLoggerService implements LoggerService{
            constructor(private appUtilService: AppUtilService) {
    
            }
    
            logService = (fileNameString): pino.Logger => {
                return pino({
                    useLevelLabels: true,
                    prettyPrint: this.appUtilService.isDevEnv(),
                    // tslint:disable-next-line: object-literal-sort-keys
                    messageKey: APP_MESSAGE_KEY,
                    level: this.appUtilService.getLogLevel(),
                    redact: {
                        paths: APP_LOG_REDACT,
                        censor: '**SECRET-INFO**'
                    },
                    base: {
                        hostName: os.hostname(),
                        platform: os.platform(),
                        processId: process.pid,
                        timestamp: this.appUtilService.getCurrentLocaleTimeZone(),
                        // tslint:disable-next-line: object-literal-sort-keys
                        fileName: this.appUtilService.getFileName(fileNameString),
                    },
                });
            }
    
            debug(message: any, context?: string): any {
            }
    
            error(message: any, trace?: string, context?: string): any {
            }
    
            log(message: any, context?: string): any {
            }
    
            warn(message: any, context?: string): any {
            }
    
        }
    

自定义实现是使用 pinojs github 中我的特定选项实现的，我使用 fastifyjs 而不是express（再次满足我的项目需求）。所以我在 fastify js 服务器选项中添加了记录器。如果您使用的是 Express，最好在 Nest 应用程序适配器中指定新的自定义实现，如上所述。

我的 util 服务负责实现 fastify 服务器

    import * as fastify from "fastify";
    import {Http2Server, Http2ServerRequest, Http2ServerResponse} from "http2";
    import {DocumentBuilder, SwaggerModule} from "@nestjs/swagger";
    import * as fs from "fs";
    import * as path from "path";
    import * as uuid from "uuid";
    import * as qs from "query-string";
    import {PinoLoggerService} from "./modules/shared/services/pino.logger.service";
    import {AppUtilService} from "./modules/shared/services/app.util.service";
    import {AppConstantsService} from "./modules/shared/services/app.constants.service";
    import {AppModel} from "./modules/shared/model/app.model";
    import {Reflector} from "@nestjs/core";
    export class ServerUtilService {
        private logService;
        private appConstantsService;
        private appUtilServiceInstance: AppUtilService;
        private fastifyInstance: fastify.FastifyInstance<Http2Server, Http2ServerRequest, Http2ServerResponse>;
        constructor() {
            this.appUtilServiceInstance = new AppUtilService();
            this.logService = new PinoLoggerService(this.appUtilServiceInstance);
            this.appConstantsService = new AppConstantsService(this.appUtilServiceInstance);
        }
    
        retrieveAppConstants(): AppModel {
            return this.appConstantsService.getServerConstants();
        }
    
        retrieveAppUtilService(): AppUtilService {
            return this.appConstantsService;
        }
        createFastifyServerInstance = (): fastify.FastifyInstance<Http2Server, Http2ServerRequest, Http2ServerResponse> => {
            const serverConstants = this.appConstantsService.getServerConstants();
            const httpsOptions = {
                cert: fs.readFileSync(path.join(process.cwd() + '/https-keys/cert.pem')),
                key: fs.readFileSync(path.join(process.cwd() + '/https-keys/key.pem')),
    
                allowHTTP1: true,
                rejectUnauthorized: true,
            };
            this.fastifyInstance = fastify({
    
                http2: true,
                https: httpsOptions,
                bodyLimit: 26214400,
                pluginTimeout: 20000,
                genReqId: () => {
                    return uuid.v4().toString();
                },
                requestIdHeader: serverConstants.requestIdHeader,
                modifyCoreObjects: true,
                trustProxy: serverConstants.trustProxy,
                ignoreTrailingSlash: true,
                logger: this.logService,
                querystringParser: (str) => {
                    return qs.parse(str);
                },
            });
            this.addContentTypeParser();
            return this.fastifyInstance;
        };
    
        private addContentTypeParser() {
            this.fastifyInstance.addContentTypeParser('*', (req, done) => {
                let data = '';
                req.on('data', chunk => {
                    console.log('inside data listener event');
                    return data += chunk; });
                req.on('end', () => {
                    done(null,data);
                })
            });
        }
    
    
    }
    export const ServerUtilServiceInstance = new ServerUtilService();
    

在我的 main.ts 中

    async function bootstrap() {
      const fastifyServerInstance = 
      ServerUtilServiceInstance.createFastifyServerInstance();
      const serverConstants = ServerUtilServiceInstance.retrieveAppConstants();
      const app: NestFastifyApplication = await NestFactory.create<NestFastifyApplication>(
          AppModule,
          new FastifyAdapter(fastifyServerInstance)
      );
        ....
        ... // global filters, interceptors, pipes
        ....
        await app.listen(serverConstants.port, '0.0.0.0');
    
    }

您可以简单地使用记录器来满足您的要求（对于错误，对于警告）。这是它的示例代码。

    import {Logger, Injectable} from '@nestjs/common';
    
    @Injectable()
    export class EmployersService {
     private readonly logger = new Logger(EmployersService.name);
    
     findAll() {
      this.logger.log('info message'); //for info
      this.logger.warn('warn message'); //for warn
      this.logger.error('error message'); //for error
     }
    }
    

然后输出： [![在此输入图像描述](https://i.stack.imgur.com/mwc8H.png)](https://i.stack.imgur.com/mwc8H.png)

How to use nestjs logging service?

在 NestJS 中，可以通过使用 `class-validator` 包和 `class-transformer` 包来实现类验证。以下是如何使用这些工具来校验一个类的属性以及嵌套对象的步骤：

### 安装必需的包

首先，需要安装 `class-validator` 和 `class-transformer`。可以使用 npm 或 yarn 来安装。

```bash
npm install class-validator class-transformer
# 或者
yarn add class-validator class-transformer
```

### 创建 DTO (Data Transfer Object) 类

在 NestJS 中，通常会创建 DTO (数据传输对象) 类，用于定义接收到的数据结构，并在类中应用验证规则。

```typescript
import { IsString, IsInt, ValidateNested, IsEmail } from 'class-validator';
import { Type } from 'class-transformer';

class UserDto {
  @IsString()
  readonly name: string;

  @IsEmail()
  readonly email: string;

  @IsInt()
  readonly age: number;
}

class CreateUserDto {
  @ValidateNested({ each: true })
  @Type(() => UserDto)
  readonly user: UserDto;
}
```

在这个例子中，`CreateUserDto` 包含了一个嵌套的 `UserDto` 对象。使用 `@ValidateNested()` 装饰器来表明该属性是一个嵌套对象，并且需要被校验。`@Type(() => UserDto)` 是 `class-transformer` 的装饰器，它告诉 NestJS 如何将原始数据转换为 UserDto 实例。

### 在控制器中使用 DTO

在控制器中，我们使用 DTO 类来接收和校验客户端发送的数据。

```typescript
import { Body, Controller, Post } from '@nestjs/common';
import { CreateUserDto } from './create-user.dto';

@Controller('users')
export class UsersController {
  @Post()
  async create(@Body() createUserDto: CreateUserDto) {
    // createUserDto 在这里已经通过验证，并且是一个 CreateUserDto 的实例
    // 可以在这里实现创建用户的逻辑
  }
}
```

### 启用全局验证管道

为了使 `class-validator` 能够自动进行验证，需要设置 NestJS 全局验证管道。可以在应用的根模块或者 main.ts 中启用它。

```typescript
import { ValidationPipe } from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useGlobalPipes(new ValidationPipe({
    whitelist: true,
    forbidNonWhitelisted: true,
    transform: true,
  }));
  await app.listen(3000);
}
bootstrap();
```

在这个配置中，`whitelist` 设置为 `true` 会自动去除非白名单属性（即 DTO 中未定义的属性），而 `forbidNonWhitelisted` 设置为 `true` 会在接收到非白名单属性时抛出错误。`transform` 选项会自动将客户端的原始数据转换为 DTO 类的实例。

### 错误处理

如果输入数据不满足 DTO 类中定义的验证规则，NestJS 会抛出一个异常。通常，异常会被全局异常过滤器捕获，并返回一个包含错误信息的响应给客户端。如果需要定制错误信息，可以创建自定义的异常过滤器。

通过上述步骤，可以在 NestJS 应用程序中实现类验证，以及嵌套对象的校验。这种方法使得数据验证变得既简洁又强大，并且保证了在进入业务逻辑之前，输入数据的正确性和有效性。

对我来说，我可以使用以下方法验证嵌套对象`'class-transformer'`

    import { Type } from 'class-transformer';
    

完整示例：

    import {
      MinLength,
      MaxLength,
      IsNotEmpty,
      ValidateNested,
      IsDefined,
      IsNotEmptyObject,
      IsObject,
      IsString,
    } from 'class-validator';
    import { Type } from 'class-transformer';
    
    class MultiLanguageDTO {
      @IsString()
      @IsNotEmpty()
      @MinLength(4)
      @MaxLength(40)
      en: string;
    
      @IsString()
      @IsNotEmpty()
      @MinLength(4)
      @MaxLength(40)
      ar: string;
    }
    
    export class VideoDTO {
      @IsDefined()
      @IsNotEmptyObject()
      @IsObject()
      @ValidateNested()
      @Type(() => MultiLanguageDTO)
      name!: MultiLanguageDTO;
    }

您预计`positions: [1]`会抛出 400，但结果被接受了。

根据这个[Github 问题](https://github.com/typestack/class-validator/issues/193#issuecomment-386877352)，这似乎是类验证器中的一个错误。如果您传入原始类型（`boolean`、`string`、`number`、...）或 an`array`而不是对象，它将接受输入作为有效输入，尽管它不应该接受。

* * *

[除了创建自定义验证装饰器](https://github.com/typestack/class-validator#custom-validation-decorators)之外，我没有看到任何标准解决方法：

    import { registerDecorator, ValidationOptions, ValidationArguments } from 'class-validator';
    
    export function IsNonPrimitiveArray(validationOptions?: ValidationOptions) {
      return (object: any, propertyName: string) => {
        registerDecorator({
          name: 'IsNonPrimitiveArray',
          target: object.constructor,
          propertyName,
          constraints: [],
          options: validationOptions,
          validator: {
            validate(value: any, args: ValidationArguments) {
              return Array.isArray(value) && value.reduce((a, b) => a && typeof b === 'object' && !Array.isArray(b), true);
            },
          },
        });
      };
    }
    

然后在你的 dto 类中使用它：

    @ValidateNested({ each: true })
    @IsNonPrimitiveArray()
    @Type(() => PositionDto)
    positions: PositionDto[];

我遇到了同样的问题，所以我创建了自己的`ValidateNested`装饰器。

    import {
      ValidationOptions,
      registerDecorator,
      ValidationArguments,
      validateSync,
    } from 'class-validator';
    import { plainToClass } from 'class-transformer';
    
    /**
     * @decorator
     * @description A custom decorator to validate a validation-schema within a validation schema upload N levels
     * @param schema The validation Class
     */
    export function ValidateNested(
      schema: new () => any,
      validationOptions?: ValidationOptions
    ) {
      return function (object: Object, propertyName: string) {
        registerDecorator({
          name: 'ValidateNested',
          target: object.constructor,
          propertyName: propertyName,
          constraints: [],
          options: validationOptions,
          validator: {
            validate(value: any, args: ValidationArguments) {
              args.value;
              if (Array.isArray(value)) {
                for (let i = 0; i < (<Array<any>>value).length; i++) {
                  if (validateSync(plainToClass(schema, value[i])).length) {
                    return false;
                  }
                }
                return true;
              } else
                return validateSync(plainToClass(schema, value)).length
                  ? false
                  : true;
            },
            defaultMessage(args) {
              if (Array.isArray(args.value)) {
                for (let i = 0; i < (<Array<any>>args.value).length; i++) {
                  return (
                    `${args.property}::index${i} -> ` +
                    validateSync(plainToClass(schema, args.value[i]))
                      .map((e) => e.constraints)
                      .reduce((acc, next) => acc.concat(Object.values(next)), [])
                  ).toString();
                }
              } else
                return (
                  `${args.property}: ` +
                  validateSync(plainToClass(schema, args.value))
                    .map((e) => e.constraints)
                    .reduce((acc, next) => acc.concat(Object.values(next)), [])
                ).toString();
            },
          },
        });
      };
    }
    

然后你可以像这样使用它 -

    class Schema2 {
    
      @IsNotEmpty()
      @IsString()
      prop1: string;
    
      @IsNotEmpty()
      @IsString()
      prop2: string;
    }
    
    
    class Schema1 {
      @IsNotEmpty()
      @IsString()
      prop3: string;
    
      @ValidateNested(Schema2)
      nested_prop: Schema2;
    }
    

适用于非原始数组和 JavaScript 对象。

How to alidate nested objects using class validator in nestjs?

`tsc`（TypeScript 编辑器）和 `ts-node` 是两个不同的工具，它们用于TypeScript代码的不同方面和场景：

### tsc（TypeScript 编译器）

* **定义**：`tsc` 是 TypeScript 的官方编译器，它是 TypeScript 语言的一部分。
* **功能**：它将 TypeScript 代码编译成 JavaScript 代码。TypeScript 是 JavaScript 的超集，所以它需要被编译成 JavaScript，才能在任何能运行 JavaScript 的环境中执行。
* **用法**：当你想要生成 JavaScript 文件以便在生产环境中部署或者在其他需要纯 JavaScript 代码的环境下运行时，你会使用 `tsc`。
* **过程**：通常，`tsc` 编译过程包括类型检查和生成相应的 JavaScript 文件。这个过程可能会包括多个步骤，比如从 `.ts` 转换到 `.js`，从 `.tsx` 转换到 `.jsx`，或者根据 `tsconfig.json` 文件中的配置进行其他转换。
* **安装**：通常作为 TypeScript 包 (`npm install -g typescript`) 的一部分被安装。

### ts-node

* **定义**：`ts-node` 是一个第三方工具，允许在 Node.js 环境中直接运行 TypeScript 代码。
* **功能**：它结合了 TypeScript 编译器和 Node.js，省去了编译步骤，直接执行代码。
* **用法**：当你想快速运行 TypeScript 代码，特别是在开发过程中，或者用于 REPL（交互式解释器）时，`ts-node` 非常有用。
* **过程**：`ts-node` 在内部使用 `tsc` 来编译 TypeScript 代码到 JavaScript，然后在 Node.js 环境中直接运行这个 JavaScript 代码，它通常不会输出 `.js` 文件到文件系统。
* **安装**：可以单独安装（`npm install -g ts-node`），并且通常用于开发依赖。

总的来说，`tsc` 主要用于编译 TypeScript 代码到 JavaScript 文件，适合生产环境的部署，而 `ts-node` 更多用于开发过程中快速执行和测试 TypeScript 代码。两者都是TypeScript开发生态中的重要工具，但它们适用于不同的场景。

最常见的做法是`tsc`用于生产构建和以与 一起`ts-node`运行的开发目的。这是我经常用于节点/打字稿项目的开发模式的命令：`--watch``nodemon`

    "dev": "nodemon -w *.ts -e ts -x ts-node --files -H -T ./src/index.ts"

Whats the difference between tsc typescript compiler and ts node?

NestJS在设计模式上提倡使用Data Transfer Objects（DTOs）和接口（Interfaces）来实现应用程序逻辑的分离以及类型安全。

### 1. DTOs（Data Transfer Objects）

DTOs在NestJS中通常用于定义数据的传输格式。它们是用来约束客户端发送到服务器端的数据结构，确保数据的一致性和验证。DTOs通常带有装饰器（decorators），这些装饰器可以提供验证规则，确保只有符合这些规则的数据才被接受和处理。

#### 例子：
假设我们有一个创建用户的API，我们可能会定义一个`CreateUserDto`类，来确保我们接收到的数据包含`username`和`password`，并且它们都是字符串：

```typescript
import { IsString } from 'class-validator';

export class CreateUserDto {
  @IsString()
  readonly username: string;

  @IsString()
  readonly password: string;
}
```

在上面的例子中，`class-validator`库提供了`@IsString()`装饰器来验证传入数据的类型。

### 2. 接口（Interfaces）

接口在TypeScript和NestJS中用于定义对象的结构，它们是为了编译时的类型检查而存在。接口定义了对象可以有哪些属性以及这些属性的类型。它们不会编译到JavaScript中，因此不会在运行时提供任何的验证。

#### 例子：
在服务或者模块之间共享数据结构时，我们可以定义一个接口来约定数据的形状。

```typescript
interface User {
  id: number;
  username: string;
  password: string;
}
```

在上述例子中，`User`接口描述了用户对象必须包含的属性和类型。任何实现了`User`接口的对象都必须有`id`，`username`和`password`这三个属性。

### 为什么同时需要？

使用DTOs和接口结合起来可以带来以下优势：

- **分层的数据验证**：DTOs可以在应用层对传入的数据进行严格的验证，而接口则在编译时提供类型检查，确保代码的正确性。
- **代码可维护性**：接口提供了一个清晰的契约定义，可以被服务、控制器和其他类实现，这使得代码更加模块化和可维护。
- **灵活性和扩展性**：DTOs可以为特定的操作定义数据格式，例如创建、更新，而接口则定义了应用程序级别的数据模型。这两者的结合使得扩展和重构变得更加容易。
- **隔离变化**：如果来自外部的数据需求变化，通常只需要调整DTO，而不需要修改内部使用的接口，这样可以最小化变化对系统的影响。

综上所述，DTOs和接口共同为NestJS提供了一个灵活、可靠和可维护的数据处理框架。通过在编译时和运行时各自发挥作用，它们确保了类型安全和数据一致性，同时也提高了代码的可读性和维护性。

根据[Nestjs 文档](https://docs.nestjs.com/controllers#request-payloads)：

> 但首先（如果您使用 TypeScript），我们需要确定 DTO（数据传输对象）架构。DTO 是一个定义数据如何通过网络发送的对象。我们可以通过使用 TypeScript 接口或简单的类来确定 DTO 模式。有趣的是，我们建议在这里使用类。为什么？类是 JavaScript ES6 标准的一部分，因此它们在编译后的 JavaScript 中作为真实实体保留。另一方面，由于 TypeScript 接口在转译过程中被删除，因此 Nest 无法在运行时引用它们。这很重要，因为管道等功能在运行时可以访问变量的元类型时可以提供额外的可能性。

我不是专家，但我根本不使用 DTO。我真的看不出它们有什么用处。在每个模块中，我都有一个服务、模块、实体和控制器。

NestJS中使用DTO和Interface的原因
-------------------------

基本上，在 REST API 中，我们有两种类型的操作，一种是输入，另一种是输出。这是**请求**和**响应**

在响应期间，我们不需要验证返回值。我们只需要根据接口传递数据即可

但根据请求，我们需要验证正文

例如，您要创建一个用户。那么请求体可能是这样的

    const body = {
     name: "Test Name",
     email: "test@gmail.com",
     phone: "0393939",
     age: 25
    }
    

因此，在请求期间，我们需要验证**电子邮件**、**电话号码**或**密码**是否与正则表达式等匹配。

所以在**DTO**中我们可以做所有的验证

### 这是我的 DTO 示例之一

    import { IsEmail, IsNotEmpty, IsString, MinLength } from 'class-validator';
    
    export class RegisterUserRequest {
      @IsString()
      @IsNotEmpty()
      name: string;
    
      @IsEmail()
      @IsNotEmpty()
      email: string;
    
      @IsNotEmpty()
      @MinLength(6)
      password: string;
    }
    
    export class LoginUserRequest {
      @IsEmail()
      @IsNotEmpty()
      email: string;
    
      @IsNotEmpty()
      @MinLength(6)
      password: string;
    }
    

### 这是界面示例

    import { UserRole } from './user.schema';
    
    export interface UserType {
      _id?: string;
      email?: string;
      name?: string;
      role: UserRole;
      createdAt?: Date;
      updatedAt?: Date;
    }
    
    

希望你能理解。

谢谢

我想`DTO`用最简单的例子来解释这个概念，以便您更好地理解。DTO 代表数据传输对象。现在，DTO 用于减少代码重复。它只是定义了一个模式，该模式在函数的参数中传递，以便轻松地从函数中获取所需的数据。这是一个例子`DTO`

    export class AuthCredentialsDto {
        email: string;
        password: string;
    }
    

现在如果我们制作一个方法来检查密码是否正确

    async password_check(usercredentials: AuthCredentialsDTO)
    {
        //Destructuring in JAVASCRIPT
        const {email} = usercredentials;
        //Database Logic to find the email
        return user;
    }
    

现在，如果我们不使用 DTO，那么代码将如下所示

    async password_check(email: string, password: string)
        {
            //Database Logic to find the email
            return user;
        }
    

另外一点是，这只是一个函数，在一个框架中，多个函数调用多个其他函数，需要一次又一次地传递参数。假设一个函数需要 10 个参数。你必须多次通过它们。尽管可以在没有 a 的情况下工作`DTO`，但这不是一种开发友好的做法。一旦习惯了，`DTO`您就会喜欢使用它们，因为它们节省了大量额外的代码和精力。问候

总长DR

你的问题的答案是肯定的，如果你愿意的话，你可以使用它们来塑造形状，但在某些情况下可能没有必要。

* * *

当您需要对数据强制执行某种形状（特别是在 Nestjs 生态系统中，它与类验证器交互很多）或以某种方式对其进行转换时，DTO 是一个很好的解决方案。例如，当您从客户端或其他服务接收数据时。在这种情况下，DTO 是制定合同的最佳方式。

但是，当您在同一应用程序的两层之间发送数据时（例如在控制器和用例之间或用例和存储库之间），您可能希望在那里使用一个接口，因为您知道您的数据是在这种情况下以正确的格式发送。

需要理解的一个关键区别是，接口作为一种开发工具，它会让您犯错误，例如在两个类之间传递缺少特定必需属性的对象，而 DTO 会影响应用程序本身，它是一个将要实例化的对象在运行时并可能用于验证和数据转换目的，这就是想法，但当然它也具有接口的功能。

根据您想要的架构，此经验法则可能有例外。例如，在我正在从事的一个项目中，域和表示层之间的契约等于前端和 API 之间的契约是很常见的。在这个项目中，为了避免创建两个类似的合约，我选择使用 DTO 来设置表示层和域层之间的合约。现在，在大多数情况下，我只是在设置 API 和客户端之间的合同时扩展 DTO。

Why do we need dtos and interfaces both in nestjs

在使用Cypress进行端到端测试时，等待页面加载是一个关键环节。通常，Cypress 自动等待页面加载并执行命令，但在特定情况下，你可能需要显式的等待页面或资源加载完成。以下是几种方法：

### 1. 自动等待DOM元素

Cypress 通常会自动等待元素可见并且可以交互。例如，使用 `cy.visit()` 访问一个页面后，Cypress 会等待页面加载完成。当使用 `cy.get()` 获取DOM元素时，Cypress 会等待该元素出现在DOM中。

```javascript
cy.visit('https://example.com');
cy.get('.important-element').should('be.visible');
```

在上述代码中，Cypress 会在访问 `example.com` 后等待 `.important-element` 元素出现并且可见。

### 2. 显式等待

如果你需要等待一个特定的时间，可以使用 `cy.wait()`。

```javascript
cy.visit('https://example.com');
cy.wait(5000); // 等待5000毫秒
cy.get('.important-element').should('be.visible');
```

### 3. 等待AJAX请求

如果页面加载涉及到异步的AJAX请求，你可以使用 `cy.wait()` 等待这些请求完成。

```javascript
cy.server();
cy.route('GET', '/api/data').as('getData');
cy.visit('https://example.com');
cy.wait('@getData');
```

在上述代码中，Cypress 会等待与别名 `getData` 匹配的AJAX请求完成。

### 4. 判断页面加载状态

有时候，你可能需要判断页面是否已经完全加载。可以通过检查 `document.readyState` 属性来了解页面加载状态，例如：

```javascript
cy.window().then((win) => {
  cy.wrap(win.document.readyState).should('eq', 'complete');
});
```

### 例子

假设我正在测试一个复杂的单页面应用（SPA），页面需要从多个API加载数据。我可能会使用以下方式来确保相关的数据和元素加载完成：

```javascript
cy.visit('/dashboard');

// 假设有一个概览框架会在数据加载后显示
cy.get('.overview-panel').should('be.visible');

// 假设页面会进行多个API请求来填充数据表格
cy.server();
cy.route('GET', '/api/users').as('loadUsers');
cy.route('GET', '/api/products').as('loadProducts');
// 然后等待这些请求成功
cy.wait('@loadUsers');
cy.wait('@loadProducts');

// 最后检查表格是否填充数据
cy.get('.user-table').find('tr').should('have.length.greaterThan', 1);
cy.get('.product-table').find('tr').should('have.length.greaterThan', 1);
```

在实际的Cypress测试中，通常不需要添加过多的显式等待，因为Cypress的默认命令队列会自动处理大部分的等待。然而，在遇到复杂的异步操作时，以上提供的方法可以帮助确保你的测试脚本稳定执行，并且能够正确地等待必要的页面加载过程。

可以在测试案例代码里面添加一些断言：

```
cy.click('#someButtonToNavigateOnNewPage');

cy.location('pathname', {timeout: 60000})
  .should('include', '/newPage');

cy.click('#YouAreOnNewPage');
```

可以更改默认超时 - 默认情况下为 4000 毫秒（4 秒）,以确保用户的页面加载完成。

所有问题