[Feature]: Tailwind colors

[zmzlois]

Version

System:
    OS: macOS 14.2.1
    CPU: (12) arm64 Apple M2 Pro
    Memory: 82.77 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 125.0.6422.142
    Safari: 17.2.1
  npmPackages:
    rspress: ^1.18.1 => 1.18.1

Details

As title stated

1. tailwind colors don't work until they are explicitly configured in tailwind.config.ts, thought this might be a bug?

   

2. any documentation on incorporating rspress exposed brand assets to be used with tailwind variables?

   

   On tailwind docs (I tried it a couple times hex colors doesn't work at all) it didn't specify how should hex colors be used https://tailwindcss.com/docs/customizing-colors#using-css-variables

Reproduce link

https://github.com/zmzlois/docs/tree/homepage-change

Reproduce Steps

1. Clone the repo
2. Delete color configuration in tailwind.config.ts
3. npm i && npm run dev

[Timeless0911]

I can't reproduce this issue. The issue of tailwind css has nothing to do with Rspress. You can check related issue of tailwind maybe.

[zmzlois]

I can't reproduce this issue. The issue of tailwind css has nothing to do with Rspress. You can check related issue of tailwind maybe.

Is it possible to give variable values with rgba colors or hsl colors rather than hex?

atm in tailwind we can do inlinetext-[var(--rp-c-brand)] and this would work,

but if I am extending the colors in tailwind config say

  extend: {
      colors: {

        background: {
          DEFAULT: "hex(var(--rp-c-bg)/<alpha-value>)", // this won't work
          light: "hsl(var(--rp-c-bg)/<alpha-value>)", // this would work if `--rp-c-bg` is hsl value
          dark: "#1a1a1a", // this would
        },
        "soft-background": {
          DEFAULT: "#f9f9f9",

        }
      }
    },

[Timeless0911]

The default theme color variants can be customized via globalStyles