NextJS设置Tailwind CSS

运行以下命令安装 Tailwind CSS 及其依赖项：
npm install tailwindcss postcss autoprefixer

npm install postcss-flexbugs-fixes postcss-preset-env postcss-normalize @fullhuman/postcss-purgecss

第 3 步：配置 Tailwind CSS
安装 Tailwind CSS 后，我们需要配置它以使用 Next.js。在项目根目录新建文件postcss.config.js，添加如下代码：

module.exports = {
   plugins: [
     'tailwindcss',
     'postcss-flexbugs-fixes',
     'postcss-preset-env',
     [
       'postcss-normalize',
       {
         allowDuplicates: false,
       },
     ],
     [
       '@fullhuman/postcss-purgecss',
       {
         content: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
         defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
       },
     ],
     'autoprefixer',
   ],
 };

此配置设置 Tailwind CSS，添加必要的 PostCSS 插件，并包括 PurgeCSS 以删除生产构建中未使用的 CSS。

第 4 步：创建 Tailwind CSS 配置

npx tailwindcss init

这将在项目的根目录中创建一个 tailwind.config.js 文件。

第 5 步：自定义 Tailwind CSS

打开 tailwind.config.js 文件并根据项目需要自定义 Tailwind CSS。以下是自定义 tailwind.config.js 文件的示例：

module.exports = {
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
   darkMode: false,
   theme: {
     extend: {
       colors: {
         primary: '#FF0000',
         secondary: '#00FF00',
       },
       fontFamily: {
         sans: ['Roboto', 'Arial', 'sans-serif'],
       },
     },
   },
   variants: {
     extend: {},
   },
   plugins: [],
 };

在此示例中，我们通过以下方式自定义 Tailwind CSS 配置：

使用清除选项指定要清除的文件。这确保只有项目中使用的 CSS 类包含在最终构建中。

通过将darkMode设置为false来禁用暗模式功能。
使用两种自定义颜色扩展调色板：primary和secondary。
添加一个名为sans的自定义字体系列，其中包括字体 Roboto、Arial 和通用的 sans-serif 后备字体。
将此基本配置的变体和插件部分保留为空。

第 6 步：导入 Tailwind CSS 样式

要在您的 Next.js 项目中使用 Tailwind CSS 样式，请将样式导入到您的 pages/_app.js 文件中。打开文件并添加以下代码：

import 'tailwindcss/tailwind.css';
 ​
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />;
 }
 ​
 export default MyApp;

在styles/globals.css添加

@tailwind base;
@tailwind components;
@tailwind utilities;

这会导入已编译的 Tailwind CSS 样式并将它们应用于您的整个应用程序。

第 7 步：启动开发服务器
现在，您已准备好启动开发服务器并查看 Tailwind CSS 的运行情况。运行以下命令：
npm run dev