🐛 BUG: Tailwind custom colours don't get applied

[CEbbinghaus]

What version of astro are you using?

1.0.0-beta.5

What package manager are you using?

pnpm

What operating system are you using?

Windows 11

Describe the Bug

Tailwind lets you define custom colours/themes in the tailwind.config.js file. These are then used in place of the default colours and can be used all the same. This can be seen here with the ability to change the colour theme whenever desired to whatever colours. However, in Astro, this very same behaviour seems to be broken. Colours won't show up and when used inside the @apply directive it even throws an error that the class doesn't exist. An issue similar to this is in the Tailwind repo (here tailwindlabs/tailwindcss/issues/396) however all of those people's problems were solved by simply adding the colour into the configuration however the problem here seems to be that the configuration colours aren't fully respected.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-zywnbf?file=src/pages/index.astro

Participation

• I am willing to submit a pull request for this issue.

[CEbbinghaus]

The issue might lie with the Tailwind integration but further testing will be needed to confirm this

[SG60]

Interestingly, the custom colours do work in the Tailwind Typography plugin... I was trying to use CSS variables as custom colours. They don't show up when I use the bg-background class (that should work in this case), but weirdly they do work when referenced for the typography theme. Not sure what's going on here.

tailwind.config.cjs file

module.exports = {
  content: ["./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}"],
  theme: {
    extend: {
      typography: ({ theme }) => ({
        site: {
          css: {
            "--tw-prose-body": theme("colors.text"),
            "--tw-prose-invert-body": theme("colors.text"),
          },
        },
      }),
      colors: {
        text: "var(--color-text)",
        background: "var(--color-background)",
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};

[sustainjane98]

Same Issue here, I am not sure if my colors are overwritten, but I can't add new spacings as an extension

[Barnabas]

@CEbbinghaus have you tried experimenting with disabling the astro preset as documented here? Of course this means you have to set up content in your tailwind.config.cjs file. I mention this because was having trouble with some of the color classes from daisyUI up until I added applyAstroPreset: false, may be related.

Fix demo here: https://stackblitz.com/edit/github-zywnbf-mfmbkx?file=astro.config.mjs

[CEbbinghaus]

@Barnabas that did indeed fix it but I am wondering if it wouldn't make more sense to prioritise the provided config over the default configuration. so something like object.assign(default, userConfig). Would there be worth with me creating a PR for those changes?

[SG60]

Yeah that fixed it for me as well.
@CEbbinghaus That sounds like a good idea to me.

[CEbbinghaus]

sweet thanks so much. very cool