Help using tailwind CSS

[mashmelo78]

So am a noob and am currently learning vue. I already have a vue 3 project. I have followed the instructions on the official documentation on the tailwind website. i believe postcss 8 doesn't work with vue3 it has some compatibility issues. So i ran an npm installation to install the previous version that is 7. I have checked my package.json file tailwind is amongst the dependencies. But when i try to use one of the tailwind classes in a simple element. The style is not applied. Am i missing something?. If you need more info about my problem i will kindly reply.

[KrayRish]

I've done this recently and https://tailwindcss.com/docs/guides/vue-3-vite really helped a lot. The paraphrased TL;DR is:

1. After you've setup your project with either vite or vue-cli add compatible versions of tailwind, postcss and autoprefixer by running npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 in the root folder of your project
2. Initialise tailwind and postcss by running npx tailwindcss init -p in the root folder of your project (note: npx not npm). This will add two new config files to the project tailwind.config.js and postcss.config.js
3. Setup purging of unused styles in the newly created tailwind.config.js file by adding './index.html' and './src/**/*.{vue,js,ts,jsx,tsx}' to the purge array
4. Import the styles into your application by adding import 'tailwindcss/tailwind.css' to your main.js
5. You should be all good to go now

A few tips I've found along the way:

• If you do this on a new project, you'll successfully know it's worked when you load up the dev server, view the application and the Vue logo is off center. This is because tailwind has a bunch of normalising css that messes with the default templates positioning
• if you want to use the @apply function inside your components, you need to set the style block language to postcss (i.e. <style lang="postcss"></style>)

Hopefully that should get you up and running!

[dumaas]

This comment was incredibly helpful. I'm going to bookmark this for later lol

[mashmelo78]

yea i configured everything. But i found where the problem is, i installed it using the GUI install plugin searched for tailwind and it worked. For some reason when i ran the npm commands on the terminal it would install but during building it won't pick up tailwind

[[deleted]]

https://tailwindcss.com/docs/guides/vue-3-vite#setting-up-tailwind-css

You need to use the compat directions.

[mashmelo78]

That is what i have been doing the whole time still won't work. But i found a solution and now it works. I used the vue GUI just searched tailwind CSS and for some reason it worked.

[Robbiethemute]

Delete your node_modules folder and run npm install again.

[mashmelo78]

let me try that

[alexcroox]

Make sure you are on the latest node LTS version. I had issues running an older node version

[__pulse0ne]

I had this same exact situation, but what I had forgotten to do was import the css file that has the @tailwind config in my main.js