How to add Tailwind CSS to Vue Ionic

Ionic Framework
1

it’s posible to add Tailwind CSS to Vue ionic

2

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

3

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”?

4

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'

1 Like
5
6

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

7

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?

8

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

1 Like
9

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

10

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.

11

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

12

Wouldn’t you miss out on all the nice ionic components? Menu drawers, tabs, animations, …

13

It depends on what you use Tailwind for in your project. I am using Tailwind in my Ionic project but only for the design and customization. I still use the Ionic components for tabs, modals, alerts, buttons, inputs, cards, etc. so I get the benefits of the built-in native feeling. My general rule is opt for the Ionic component and then customize it with Tailwind as needed.

1 Like
14

That sounds perfect, do they not get in the way of each other in terms of classes and such? If you can recommend a guide to setup Tailwind next to Ionic, keeping the core ionic component, like you mentioned, feel free to share it! Thanks

15

I haven’t had any issues or conflicts. Here is my setup that I posted a while ago - Integration of Ionic React Tailwind CSS - #6 by twestrick

1 Like
16

Which commands you configured to do it, i followed everything on Angular tailwind installation, but didn’t find out anything

17

I am not 100% clear on what you are asking but I have it integrated with PostCSS so just running the normal Ionic commands do the necessary builds. Running ionic serve also starts the Tailwind JIT compiler.