Tailwind CSS

[joshuabillington]

Is it possible to integrate Tailwind CSS into Flyntt? How would you suggest going about that?

[steffenbew]

Hi @joshuabillington, I'm sure you could load Tailwind as a dependency and remove the BaseStyle and individual component styles instead.
I haven't implemented Tailwind myself before, but I would be curious to learn if there would be any issues with our setup when following the Tailwind installation guide.

[CodeConvergence]

TailwindCSS 2 & 3 (3.0.2) can be used following the CLI installation method.
Using PostCSS, TailwindCSS 2.x can be implemented with Flynt 1.4.0 but if you want to use Tailwind v3 then I believe you need to update to PostCSS 8.
@steffenbew: Would you mind posting what needs to be updated in Flynt to support PostCSS 8?

[steffenbew]

@CodeConvergence I have genuinely no idea. @domtra, could you please help answer this?

[domtra]

@CodeConvergence without knowing the exact steps, i will most likely need to update the postcss-loader and autoprefixer.
It might be, however, that the latest versions are not compatible with webpack v4, the webpack version we are using currently in flynt. so you will need to check, what's the latest versions of postcss loader and autoprefixer that support webpack v4 and install those (update via npm).
Let me know if this helps you to find a solution or if there is more that you need.

[CodeConvergence]

Thank you @domtra and @steffenbew, I'll look into your suggestion and post back here the results.

[CodeConvergence]

It’s not too cumbersome to integrate TailwindCSS 3, if you don’t update webpack, which you don’t need to. If you do want to try a more recent version (5.x) then there are a few dependancies that need to be adjusted. Honestly, I didn’t get everything to update up as I wanted - most notably "css-minimizer-webpack-plugin”, which remains at v1.3.0 rather than 3.4.1. A route into this particular problem can be found here: https://stackoverflow.com/questions/68026816/cannot-read-property-tappromise-of-undefined-when-build-using-css-minimizer-we
As everything works well enough, I’m not going to spend more time on this now, if I revisit it again in the future, I’ll post an update here (hopefully, if I remember ;)