I am using Api only rails app with Vue 3. Integrating tailwindcss into my project. Everything seems to be in place but styles are not being reflected.

Here are my different file structure.

package.json

{
  "dependencies": {
    "@rails/webpacker": "5.4.4",
    "@tailwindcss/postcss7-compat": "2.1.4",
    "autoprefixer": "9",
    "css-loader": "3.6.0",
    "pinia": "^2.1.7",
    "postcss": "7",
    "postcss-loader": "3.0.0",
    "vue": "^3.4.29",
    "vue-style-loader": "4.1.3",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/plugin-transform-runtime": "^7.24.7",
    "@babel/plugin-transform-typescript": "^7.24.7",
    "@babel/preset-env": "^7.24.7",
    "@babel/preset-typescript": "^7.24.7",
    "@vue/compiler-sfc": "^3.4.30",
    "ts-loader": ">=8.0.0 <9.0.0",
    "typescript": ">=4.0.0 <5.0.0",
    "vue-loader": "^17.4.2",
    "webpack-dev-server": "^3"
  }
}

application.ts

import { createApp } from 'vue';
import App from 'components/App.vue';  // Example path to your main App.vue component
import { createPinia } from 'pinia';
import 'assets/stylesheets/application.css';

const app = createApp(App);
app.use(createPinia());
app.mount('#app');

App.vue

<template>
  <div class="p-4 bg-blue-500 text-white">
    <h1 >{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'App',
  setup() {
    const title = ref<string>('Welcome to Vue.jjjs');
    const message = ref<string>('This is an pp component');
    
    return {
      title,
      message
    };
  }
});
</script>

postcss.config

module.exports = {
  plugins: [
    require('@tailwindcss/postcss7-compat'),
    require('autoprefixer'),
  ],
};

tailwind.config

module.exports = {
  content: [
    './app/javascript/**/*.js',
    './app/javascript/**/*.vue',
    './app/javascript/**/*.ts',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

webpack/loaders/css.js

module.exports = {
  test: /.css$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: [
            require('@tailwindcss/postcss7-compat'),
            require('autoprefixer'),
          ],
        },
      },
    },
  ],
};

environment.js

const { environment } = require('@rails/webpacker');
const { VueLoaderPlugin } = require('vue-loader');
const vue = require('./loaders/vue');
const typescript = require('./loaders/typescript');
const css = require('./loaders/css');

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin());
environment.loaders.prepend('vue', vue);
environment.loaders.prepend('css', css);
environment.loaders.prepend('typescript', typescript);

environment.config.merge({
  resolve: {
    extensions: ['.mjs', '.js', '.ts', '.vue', '.json'],
    mainFields: ['main', 'module'],
  },
  module: {
    rules: [
      {
        test: /.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      }
    ]
  },
});

module.exports = environment;

tailwind build is working properly as well and css file is being created with all the tailwind classes.

bin/webpack-dev-server and rails webpacker:compile runs successfully as well.