Tailwindcss does not work in Vue.js when all process of intergration has been done?

Question

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.

Answer 1

From Tailwind Vue docs:

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

Answer 2

My solution:

• step 1: yarn postcss
• step 2: create file postcss.config.js and add content:

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