域名 AXUM.RS 将于 2025 年 10 月到期。我们无意再对其进行续费,如果你有意接续这个域名,请与我们取得联系。
  • AXUM.RS 现仅需人民币 3000 元(大写:叁仟元整。接受适度议价
  • 按照行业规则,AXUM.RS 到期后,大概率会进入长时间的赎回期,该期间内,如果你想拥有该域名,将要付出高额的费用
  • 我们已启用 AXUM.EU.ORG 域名,并将持续运营
  • 仅接受微信或支付宝交易
如果你对 AXUM.RS 有兴趣,请和我们进行联系:

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

【NextJS】create-next-app

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: [],
    }
    
/** @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}"]

【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;

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

要查看完整内容,请先登录