windmill-react-ui icon indicating copy to clipboard operation
windmill-react-ui copied to clipboard

I want tailwind v3 compatibility for windmill react ui.

Open sumgwork opened this issue 3 years ago • 5 comments

Is your feature request related to a problem? Please describe. I would like @windmill/react-ui package to be supported in applications that are using tailwindcss v3 or above.

Describe the solution you'd like With the current configuration, I see how windmill wrapper for config uses purge and not content. In order to use it with tailwindcss v3, I guess some changes will be required.

Describe alternatives you've considered Not really at the moment.

Additional context

sumgwork avatar Dec 11 '21 22:12 sumgwork

can't wait to have this great UI kit upgraded with tailwind v3, I forked it here: https://github.com/ngduc/windmill-react-ui-kit upgraded and fixed a few things for storybook also.

ngduc avatar Jan 21 '22 05:01 ngduc

I am using Next.js, Tailwind 3, Windmill, and Storybook. mine borked on what I assume are new color classes that came with Tailwind 3. Other Tailwind classes worked, so guessing it was the version mismatch. tried the fork, and it didn't break, but also didn't fix my issue.

this is what worked for me:

const windmill = require('@windmill/react-ui/config')

const config = {
  content: ['./src/app/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

module.exports = {
  ...windmill(config),
  ...config,
}

Basically, I let Windmill's Tailwind 2 config read my Tailwind 3 config without eating it, by using spread operators. I'm going to roll with it. Figure it's a decent workaround for now, In case it helps anyone 🤷

jblossomweb avatar Jan 30 '22 16:01 jblossomweb

I tried the solution above, but some class names are not applied

https://stackblitz.com/edit/vitejs-vite-qtez3g

dhatGuy avatar Jan 03 '23 20:01 dhatGuy

@jblossomweb I tried your solution and it worked, thank you.

henzyd avatar Apr 10 '23 00:04 henzyd

Is your feature request related to a problem? Please describe. I would like @windmill/react-ui package to be supported in applications that are using tailwindcss v3 or above.

Describe the solution you'd like With the current configuration, I see how windmill wrapper for config uses purge and not content. In order to use it with tailwindcss v3, I guess some changes will be required.

Describe alternatives you've considered Not really at the moment.

Additional context

Tailwind V3 https://github.com/narimanb/wreactui

  • renamed the 'purge' to 'content'
  • removed 'variants' configuration
  • updated new tailwind syntax for 'opacity'
  • storybook v7, react testing library, tailwindcss V3, tailwindcss/forms 0.5.3 ...,

narimanb avatar Jul 03 '23 01:07 narimanb