How to add Tailwind CSS to Vue Ionic

it’s posible to add Tailwind CSS to Vue ionic

i too would like to know how best to do this.

So far I’ve tried with vue-cli-plugin-tailwind but that broke some styles in ionic (buttons went blank).

i am going to try manually now, but if anyone has a solution, please chime in

what are you trying to accomplish? why don’t you just create your application using Tailwind CSS and add capacitor to it? Not sure what you mean by “adding Tailwind CSS to Ionic”?

I just installed manually, but ideally tailwind is part of the vue ionic build system and takes advantage of postcss and purging)

to install manually i simply downloaded the full css file and put into src/assets/css/ as tailwind.css
then added to main.ts with an import '@/assets/css/tailwind.min.css'

Can anyone please tell me how to use the progress bar in the file upload form

Tailwind uses PostCSS 8 now. The questions asked here (and what I’m also looking for now) is how to combine Tailwind with Ionic. If I install Tailwind as I would do with a Vue project, I get the error that PostCSS 8 is required and an updated version of the webpack-postcss loader.
However, installing this manually doesn’t do anything and we can’t get to the Webpack core that I guess Ionic uses to compile Vue. The webpack settings Ionic uses for Vue are buried somewhere within the Ionic setup?

So how to proceed? Does Ionic need to be updated with PostCSS 8 and the correct Webpack loaders before we can use Tailwind? Does Ionic processes Vue with another builder than Webpack?

Just to say, installing Tailwind with the PostCSS 7 compatibility build solves is.
I hope PostCSS 8 support comes soon.

2 Likes

@TomDeSmet any luck getting Tailwind CSS Intellisense in VSCode to work? I am stuck on that bit. (I think)

I don’t use VScode and I don’t think your issue it has anything to do with Ionic. You should check the VScode docs for it.

If you’re using up to Ionic v5 you have to install Tailwind with PostCSS 7: Installation - Tailwind CSS

Starting from Ionic v6 (you can already migrate and install the beta) Webpack 5 will be used along with PostCSS 8 support and therefore you can follow the usual installation guide