Tailwind not working with vue

[whytepeter]

i installed tailwindcss into a vuejs SPA did all the setup
create a assets/css/tailwind.css and added the necessary base styles
imported it in the main.js file
create a postcss.config.js file and copied the required configuration from the official documentation

but the tailwind styles don't apply to my markups
inside the tailwind.css
`@tailwind base;

@tailwind components;

@tailwind utilities;
`

inside the postcss.config.js
module.exports = { plugins: [ // ... require("tailwindcss"), require("autoprefixer"), // ... ], }

inside the main.js file
import Vue from "vue" import App from "./App.vue" import "./registerServiceWorker" import router from "./router" import store from "./store" import axios from "axios" import "./assets/css/tailwind.css" import firebase from "firebase/app" import "firebase/firestore" import "firebase/auth"

The package.json file
"dependencies": { "autoprefixer": "^9.7.6", "axios": "^0.19.2", "core-js": "^3.6.4", "firebase": "^7.14.2", "register-service-worker": "^1.7.1", "tailwindcss": "^1.4.0", "vue": "^2.6.11", "vue-router": "^3.1.6", "vuex": "^3.1.3" },
I don't know what am doing wrong

[adamwathan]

I'm not sure if you can import your styles into main.js, usually you do it in App.vue.

[whytepeter]

before the upgrade...it works normally
after i created a new project and installed the new tailwind version 1.4
I think its cause I didn't include the purgecss in the tailwind.config file

[whytepeter]

what happens if dont add this in the tailwind.config file
purge: [ './src/**/*.html', './src/**/*.vue', './src/**/*.jsx', ],

[whytepeter]

is there a whole new process i have to follow to install the new version in a vue project'

[ali5alkaf5]

what happens if dont add this in the tailwind.config file purge: [ './src/**/*.html', './src/**/*.vue', './src/**/*.jsx', ],

This is the only correct answer that solved my problem! Thank you

[chrisjbarr]

Is it possible purge-css is purging your @tailwind base and @tailwind components? I had a similar issue (< 1.4 and vue-cli-plugin-tailwind/purgecss) and wrapped those two lines in my tailwind.css with

/* purgecss start ignore */
@tailwind base;

@tailwind components;
/* purgecss end ignore */

Probably not the right solution - I'm planning on revisiting after I upgrade to 1.4 today and remove vue-cli-plugin-tailwind/purgecss. Add those and just debug a bit and see if that is the real issue, then go from there? Also, fwiw, I have my import in main.js not App.vue.

[chrisjbarr]

@whytepeter - I just upgraded to 1.4 and removed vue-cli-plugin-tailwind/purgecss and had no problems.. just followed instructions on tailwindcss.com ... do you have public repo that reproduces your problem you can share we can take a peek to try and help?

[noook]

I am having the same problem here.
Steps:

• Upgrade tailwindcss from 1.2 to 1.4.6
• Move config from postcss.config.js to tailwind.config.js like this:

// tailwind.config.js
module.exports = {
  purge: {
    content: ['./public/**/*.html', './src/**/*.vue'],
    options: {
      whitelistPatterns: [
        /-(leave|enter|appear)(|-(to|from|active))$/,
        /^(?!(|.*?:)cursor-move).+-move$/,
        /^router-link(|-exact)-active$/,
        /tooltip/,
        /popover/,
        /notification/,
      ],
    }
  },
  // ...
}

• Remove postcss.config.js

Now all my style is removed, there's litterally nothing applied.

I am sure the file is imported, as when I write html { background-color: red; } in the file where I import tailwind works perfectly.

I am using Vue in dev mode, with their development server.

I unfortunately cannot share the repository, I'll try to create one though.

[noook]

Ok nevermind, what happened was configuration conflict. At first, I didn't delete the postcss.config.js file, and there was still remaining purge settings. I reduced the config file to only this:

const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss,
  ],
};

In summary:

• postcss.config.js must not be removed
• Don't duplicate configuration

And it does the trick 😄

[SamuelALSN]

I did the same configuration but it tailwind still not working in my Vue-cli project

[nbpalomino]

I was having the same problem, but @adamwathan points to this correct config for App.vue using tailwindcss

And my problem was solved!

[mr-feek]

@nbpalomino I wish this was in the docs -- that got it working for me!

[PabloGnesutta]

YESSSSSSSSSSSSSSSSSSSSSSSSS! This is the one.

[ahmad721721]

just run these two commands and your are good to go
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

postcss 8 is new so rolling back to postcss 7 for a while. once the issue with postcss 8 is resolved by tailwind dev team then you can upgrade to postcss by these commands

npm uninstall tailwindcss @tailwindcss/postcss7-compat
npm install tailwindcss@latest postcss@latest autoprefixer@latest

[jkirira]

This worked. Thanks for this.

[tonyIkwuegbu]

Thanks Ahmad

[Bahrul-Rozak]

This worked, thanks man

[Monoxt]

Thanks Ahmad

[kakcruz]

Thanks!!!! Save my life!!

[kylewill]

I've got the same issue using this starter template: https://github.com/kefranabg/bento-starter

I've tried all of the steps in this thread including the postcss 7 rollback, using in App.vue vs. main.js. No TailwindCSS is rendered in the project.

If I start a new project with Vue 3 + Vite using the docs it works. But I'm already down the road on this project using the bento starter.

edit: is there any debug log and I share to determine where the breakdown is?

[itrew]

Have you tried just disabling the purgecss piece of tailwind to see if that solves your issue? I was running into an issue with writing custom styles for inner elements of Vue Formulate so some of my styles were actually defined in main.js and were getting dropped via purgecss. Ended up adding a path to purge.content that now includes all the classes NOT defined in my .vue files.

// tailwind.config.js
module.exports = {
  purge: {
    enabled: true,
    content: ['./public/**/*.html', './src/**/*.vue', './src/main.js'],
    // ...
  },
  // ...
}

[hussain5577]

Replace this code with your postcss.config.js

module.exports = () => {
  return {
    postcssPlugin: 'postcss-will-change',
    Declaration: {
      'will-change': (decl, { Declaration }) => {
        decl.cloneBefore(
          new Declaration({ prop: 'backface-visibility', value: 'hidden' })
        )
      }
    }
  }
}
module.exports.postcss = true

https://github.com/postcss/postcss/releases/tag/8.0.0

[jenstornell]

The docs are quite solid for installing Vue + Tailwind.

https://tailwindcss.com/docs/guides/vue-3-vite

[tony-nyagah]

This setup doesn't work if you're not using Vite from my experience.

[snakysnake]

I did this 1:1 with Vite and Vue 3 and still cant get it to work

[WallaceSociety]

The instructions fail to mention that you need to add tailwindcss: {}, to your plugins object in postcss.config.js

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {}
    }
  }

[alisalehi1380]

Tnks dude! work for me. 👍

[Jehadalmaliki]

The most issue programmer faced I think they didn't read carefully documentation and search about the specific using of tailwind with witch framework does it apply ,the will save there time when they apply the tips mentions on .

[jose999888]

please you download tailwind in your vue , you can try it if ok

[KarmaBlackshaw]

I tried solutions above to no success. I followed this one.

Technically, you have to create postcss.config.js

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ]
}

"vue": "^2.7.14",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.21",
"tailwindcss": "^3.2.4",

[tonyIkwuegbu]

Thanks

…

On Sun, 8 Jan 2023, 8:07 am Ernie Jeash Villahermosa, < ***@***.***> wrote: I followed this one <https://morioh.com/p/b1c3d288fcde>. Technically, you have to create postcss.config.js module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer') ]} "vue": "^2.7.14","autoprefixer": "^10.4.13","postcss": "^8.4.21","tailwindcss": "^3.2.4", — Reply to this email directly, view it on GitHub <#1666 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMTWY6PD7WMB4XVKZWH5NBTWRJRSZANCNFSM4MVQVA3A> . You are receiving this because you commented.Message ID: ***@***.*** com>

[mrrajsoni]

https://tailwindcss.com/docs/guides/vite#vue - Following this solved my issue.

I was missing .{vue} from the tailwind.config.js content property

content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],

Adding .vue extension solved it.

[Afsalazeez]

Thanks a lot! It worked !

[LuckyArdhika]

work like a charm!, thats not explained in starter docs

[hardik-wts]

Its work with Vue 3.2.13 & tailwind 3.3.3

With below config

"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"autoprefixer": "^10.4.15",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"postcss": "^8.4.29",
"tailwindcss": "^3.3.3"
}

Thanks @mrrajsoni 👍

[alisalehi1380]

Tnks man 🙏