🐛 BUG: Tailwind CSS classes are not working when a component has `client:* directive`

[Khandakar227]

What version of astro are you using?

1.0.0-beta.73

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Linux

Describe the Bug

Normally tailwind CSS classes work properly. I write a class name, save and it's automatically effected on the browser. However, when I use it with custom components built with other frameworks (I am using @astrojs/svelte) that have client:*directive (i.e: client:load) the some classes does not seem to effect the page or I should not working properly.

Note: Classes that are written after adding client:load does not seem to work

workaround: Created an npm script to build css file (according to the tailwind's official doc) and not using @astrojs/tailwind adapter.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-zywnbf-ccpten?file=src%2Fcomponents%2FButton.svelte

Participation

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

[j-piccolo]

I have the same issue with astro 1.0.0-rc.6. One thing I noticed is that it only seems to affect the component with client:load, if i have another component inside that one tailwind classes will work for that child component.

[matthewp]

This is an interesting one because even if you ignore the svelte component and just use bg-blue-700 in the index.astro it doesn't show up. Not sure what is happening.

[matthewp]

Ah, it's because you are setting theme colors which overrides the builtin colors. You need to use extends. https://tailwindcss.com/docs/background-color#customizing-your-theme

module.exports = {
	content: ['./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}'],
  theme: {
-   colors: {
-     'background': '#ffbfff',
-     'primary': '#6878ff',
-     'primary-alt': '#9999ff',
-     'on-background': '#000000',
-   },
    extend: {
+      colors: {
+        'background': '#ffbfff',
+        'primary': '#6878ff',
+        'primary-alt': '#9999ff',
+        'on-background': '#000000',
+      },
    },
  },
  plugins: [],
};