I have a JSF project I want to use tailwind into it Could anyone has idea how implement tailwind CSS into JSF
https://tailwindcss.com/docs/installation
https://tailwindcss.com/docs/installation/using-postcss
I have tried to implement but I couldn't
Asked
Active
Viewed 501 times
1
-
Does this answer your question? [How to reference CSS / JS / image resource in Facelets template?](https://stackoverflow.com/questions/8367421/how-to-reference-css-js-image-resource-in-facelets-template) – Jasper de Vries Dec 12 '21 at 10:43
-
Which results in a CSS to load in your template – Jasper de Vries Dec 12 '21 at 20:38
-
No, It is not just CSS file Tailwind v3.0 has a different configuration tailwindcss.com/docs/installation https://tailwindcss.com/docs/installation/using-postcss I have tried to implement but I couldn't – Khalil ALMAASALI Dec 12 '21 at 20:39
-
https://tailwindcss.com/docs/installation/play-cdn When I use is working fine but when I try use form template of tailwind doesn't work because it needs configuration in tailwind.config.js – Khalil ALMAASALI Dec 13 '21 at 00:13
-
You might want to have a look at PrimeFlex in combination with PrimeFaces – Jasper de Vries Dec 13 '21 at 16:59
-
OK I will check it, thanks – Khalil ALMAASALI Dec 13 '21 at 20:48
1 Answers
1
I've tried using tailwind with postcss, and didn't get it to work. It was a lot of issues with getting the postcss processor to run. Using the tailwind cli went like a charm, however. The step are as follows:
- Run npm init in the webapp folder (where the xhtml files reside)
- Install tailwindcss as a dev dependency using npm
- Follow the tailwind getting started guide for tailwind css
- Finally, create a npm script for running tailwind css generation
"css-watch": "tailwindcss -i ./main.css -o ./dist/styles.css --watch" - Start the css-watch script using
npm run css-watch
Then, you probably want to do some hiding of the irrelevant files when you package the app. This is not necessary, but might be a requirement security-wise.
Gorgon Zola
- 11
- 2