PostCSS with .css file not rendering the nested classes nor pseudo classes

Question

tw-imports.css

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

tailwind.config.js


const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind');
const { join } = require('path');

module.exports = {
  mode: 'jit',
  content: [
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  darkMode: 'media',
  theme: {
    extend: {},
  },
  plugins: [],
};

postcsss.config.js


module.exports = {
  plugins: [
    'postcss-import',
    'tailwindcss',
    'postcss-flexbugs-fixes',
    'postcss-nested',
    'postcss-custom-properties',
    'autoprefixer',
    [
     'postcss-preset-env',
     {
         autoprefixer: {
             flexbox: 'no-2009',
         },
         stage: 3,
         features: {
             'custom-properties': true,
             'nesting-rules': true,
         },
     },
    ],
  ],
}

css

.button {
  @apply rounded text-slate-500 ring-slate-900/5 shadow p-3 ring-2;

  &:hover {
    --mainColor: #b3a5c0;
    color: var(--mainColor);
  }
}

.storybook/main.js

module.exports = {
  stories: [],
  addons: [
    '@storybook/addon-essentials',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        }
      }
    }
  ],
  core: {
    builder: 'webpack5',
  },
  // uncomment the property below if you want to apply some webpack config globally
  webpackFinal: async (config, { configType }) => {
    // Make whatever fine-grained changes you need that should apply to all storybook configs

    // Return the altered config
    return config;
  },
};

result

stickyuser · Answer

Here is a postcss.config.js example from my most recent project. I am using tailwindcss/nesting which still wraps postcss-nested as explained here https://tailwindcss.com/docs/using-with-preprocessors#nesting

module.exports = {
  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {},
    cssnano: {
      preset: "default",
      autoprefixer: { add: false },
    },
  },
}

I had a similar problem as you a while back, and package versions were important, so here is my package.json.

  "devDependencies": {
    "@tailwindcss/line-clamp": "^0.4.0",
    "@tailwindcss/typography": "^0.5.2",
    "autoprefixer": "^10.2.5",
    "cssnano": "^4.1.11",
    "postcss": "^8.4.14",
    "postcss-cli": "^9.1.0",
    "postcss-custom-media": "^7.0.8",
    "postcss-import": "^14.1.0",
    "postcss-nested": "^5.0.5",
    "postcss-preset-env": "^6.7.0",
    "tailwindcss": "^3.1.2"
  }

This is TailwindCSS v3, and it looks like you may be using v2, but hopefully it is still useful.

PostCSS with .css file not rendering the nested classes nor pseudo classes

1 Answers