Vue3, Tailwind and Postcss configs, nesting not working

Question

I have a new Vue3 app created, using TailwindCSS for theming, however cannot get the nesting plugin to work. Also am a bit confused as to how Tailwind knows to use the PostCSS config, when our watch command is using tailwind

script to run tailwind and generate our output css file:

"tailwind": "npx tailwindcss -i./src/assets/input.css -o./public/moonstyles.css --watch",

Package.json

"dependencies": {
  "@headlessui/vue": "^1.7.5",
  "@heroicons/vue": "^2.0.13",
  "pinia": "^2.0.28",
  "ramda": "^0.28.0",
  "vue": "^3.2.45",
  "vue-router": "^4.1.6"
},
"devDependencies": {
  "@rushstack/eslint-patch": "^1.1.4",
  "@vitejs/plugin-vue": "^4.0.0",
  "@vitejs/plugin-vue-jsx": "^3.0.0",
  "@vue/eslint-config-prettier": "^7.0.0",
  "autoprefixer": "^10.4.13",
  "cypress": "^12.0.2",
  "eslint": "^8.22.0",
  "eslint-plugin-cypress": "^2.12.1",
  "eslint-plugin-vue": "^9.3.0",
  "jest": "^29.3.1",
  "postcss": "^8.4.20",
  "postcss-import": "^15.1.0",
  "postcss-nesting": "^10.2.0",
  "prettier": "^2.7.1",
  "start-server-and-test": "^1.15.2",
  "tailwindcss": "^3.2.4",
  "vite": "^4.0.0",
  "vue-cli-plugin-tailwind": "~3.0.0"
},

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,vue}"],
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    extend: {
      colors: {
        brightRed: 'hsl(12, 88%, 59%)',
      },
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  prefix: 'tw-',
  plugins: [],
}

postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {
      config: './tailwind.config.js'
    },
    autoprefixer: {},
  },
}

The main input file

@import './tailwind.css';
@import './base.css';
@import './main.css';

@import './test.css';

Finally the CSS file that is imported into the main tailwind.css file

.welcome {
  .leon {
    color: blue important!;
  }
  em {
    color: red important;
  }
}

h1 {
  color: green;
}
/* .leon {
  color: blue !important;
}

em {
  color: red;
} */

The markup

<div>
  <h1 class="text-2xl font-bold underline">
    Hello world!
  </h1>
  <h2 class="welcome text-4xl">
    <div class="leon bg-brightRed">Leon</div>
    <em>!!!</em>
  </h2>
  <button type="button">
    Options
  </button>
</div>

As you can see below, Leon is not in blue, and,.! is not in red, nor do those nested styles show up.

Answer 1

Below is the format of my tailwind.css file and it works successfully. Have you tried encapsulating your the code in your 'main tailwind.css' file into a '@layer components' section using a similar format?

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base { ... }    
@layer components 
{
  body {
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
  }
  .v-select{
    @apply w-full border border-color-dark-gray rounded-md px-3 py-1 shadow-sm
    focus:border-color-orange focus:ring-color-orange;
  }
  strong{
    @apply text-color-red
  
  }
}