Tailwind: 集成到React/NextJS

本章将介绍如何将 Tailwind 集成到 React 或 NextJS 项目中。

在 Tailwind 的开篇，我就给出了 Tailwind 的各种安装方式的链接，其中就包括了基于 React 和 NextJS 的方法。无论你是否点开过那个链接进行学习，我们现在进行一下汇总。【如果你已经掌握了这部分内容，请跳过本章】

下面的示例，假设我们要创建的项目叫做 axum-rs-fullstack：

创建项目

• 【React】之 create-react-app

  yarn create react-app axum-rs-fullstack
  

• 【React】之 vite

  yarn create vite axum-rs-fullstack --template react
  

• 【NextJS】create-next-app

【React】之 vite

yarn create next-app axum-rs-fullstack

集成 Tailwind

进入项目所在目录：

cd axum-rs-fullstack

安装依赖

yarn add -D tailwindcss postcss autoprefixer

生成 tailwind 配置文件

npx tailwindcss init -p

配置要使用 tailwind 的文件

打开上一步生成的 tailwind.config.js 文件，在其中的修改其中的 content数组的内容

• 【React】之create-react-app：content:["./src/**/*.{js,jsx,ts,tsx}"]

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./src/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 【React】之vite：content:["./index.html","./src/**/*.{js,ts,jsx,tsx}"]

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./index.html",
      "./src/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 【NextJS】create-next-app：content:["./pages/**/*.{js,ts,jsx,tsx}","./components/**/*.{js,ts,jsx,tsx}"]

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./pages/**/*.{js,ts,jsx,tsx}",
      "./components/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

【React】之create-react-app：content:["./src/**/*.{js,jsx,ts,tsx}"]

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

【React】之vite：content:["./index.html","./src/**/*.{js,ts,jsx,tsx}"]

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

【NextJS】create-next-app：content:["./pages/**/*.{js,ts,jsx,tsx}","./components/**/*.{js,ts,jsx,tsx}"]

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在项目的全局样式文件中，加入 tailwind 指令

• 【React】之create-react-app：src/index.css
• 【React】之vite：src/index.css
• 【NextJS】create-next-app：styles/globals.css

我们提供了一个NextJS集成Tailwind的初始项目：axum-rs-nextjs-with-tailwind