5

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.

MaxiGui
  • 6,190
  • 4
  • 16
  • 33
Nadeem Khan
  • 127
  • 2
  • 11
  • 1
    it's weird, I'm having the same problem, even following the document – Hasunohana Dec 02 '20 at 18:01
  • 8
    I have found the answer brother when you complete these process. Then restart server again using " NPM RUN SERVE" because when we add configuration files into src files server is not updated that's why tailwind is not working . So after all stuff done then restart serve I hope it will work fine. – Nadeem Khan Dec 03 '20 at 12:51
  • Thanks Nadeem, I got it by updating node version 10 to 15 – Hasunohana Dec 03 '20 at 21:49

2 Answers2

2

My solution:

  • step 1: yarn postcss
  • step 2: create file postcss.config.js and add content:
 module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
 };
pmatatias
  • 3,491
  • 3
  • 10
  • 30
Mạnh Hoan Dương
  • 51
  • 2
1

From Tailwind Vue docs:

After the steps you described it is necessary to run vue again.

Mithsew
  • 1,129
  • 8
  • 20