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

Tailwind: 配置和插件

本章将讨论如何配置 tailwind,以及几个 tailwind 官方插件。

  • content:配置 tailwind 要处理的文件。只有在这里配置的文件,才能使用 tailwind 的样式,进而由 PostCSS 打包进实际项目中

  • theme:主题

    • extend:扩展
  • plugins:插件

content:配置 tailwind 要处理的文件。只有在这里配置的文件,才能使用 tailwind 的样式,进而由 PostCSS 打包进实际项目中

theme:主题

  • extend:扩展

plugins:插件

为了避免出错,对照默认配置文件进行操作未免不是一个好办法。当然,由于我们的配置文件中有 /** @type {import('tailwindcss').Config} */,像VSCODE这种编辑器,会有配置项的自动提示。

配置:覆盖还是扩展

  • 如果你把配置项直接写在 theme里,那就是覆盖了默认配置,默认配置里的同一类型的预定义值可能都会失效,而改用你的配置
  • 如果你把配置项写在 theme.extend里,那就是扩展,可以同时使用默认配置和你扩展的配置。

下面我们通过扩展一个名为 axum-rs,值为#7b1f00的颜色进行讲解。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        'axum-rs': '#7b1f00',
      },
    },
  },
  plugins: [],
};

此时,无论是文本、背景、边框等等,都可以使用 axum-rs 这个颜色了:

export default function Home() {
  return (
    <div>
      <div className="text-axum-rs">你好,Axum.rs</div>
      <div className="bg-axum-rs text-gray-50">你好,Axum.rs</div>
      <div className="border-4 border-axum-rs my-3 p-3">你好,Axum.rs</div>
    </div>
  );
}

本小节代码:axum-rs-nextjs-with-tailwind-extend-color

官方插件

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