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

Tailwind: 集成到React/NextJS

本章将介绍如何将 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

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}"]

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

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