域名 AXUM.RS 将于2025年10月到期。我们无意再对其进行续费，我们希望你能够接续这个域名，让更多 AXUM 开发者继续受益。
  • 方案1️⃣：AXUM.RS 域名 = 3000
  • 方案2️⃣：方案1️⃣ + 本站所有专题原始 Markdown 文档 = 5000
  • 方案3️⃣：方案2️⃣ + 本站原始数据库 = 5500
如果你有意接续这份 AXUM 情怀，请与我们取得联系。
说明：
  1. 如果有人购买 AXUM.RS 域名（方案1️⃣），或者该域名到期，本站将启用新的免费域名继续提供服务。
  2. 如果有人购买了 AXUM.RS 域名，且同时购买了内容和/或数据库（方案2️⃣/方案3️⃣），本站将关闭。届时我们或许会以另一种方式与你再相遇。

AXUM中文网

全栈：AXUM、React、NextJS 和 TailWindCSS

Tailwind: 集成到React/NextJS

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

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

创建项目

【React】之 create-react-app

yarn create react-app axum-rs-fullstack

【React】之 vite

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

集成 Tailwind

进入项目所在目录：

cd axum-rs-fullstack

安装依赖

生成 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: [],
}

/** @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 指令

@tailwind base;
@tailwind components;
@tailwind utilities;
  • 【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

要查看完整内容，请先登录
登录注册