Custom config isn't working

[tomhave97]

Whenever adding a new "rule" to the config it won't be applyed, and is so on not usable. whether as a class name nor in @apply.

this is my tailwind.config.js :

module.exports = {
  purge: [],
  theme: {
    fontFamily: {
      display: ["Roboto", "sans-serif"],
      body: ["Roboto", "sans-serif"]
    },
    colors: {
      primary: "#9cdbff"
    },
    extends: {
      margin: {
        p49: "49%",
        p32: "32%"
      }
    }
  },
  variants: {},
  plugins: []
};

my postcss.config.js :

const autoprefixer = require("autoprefixer");
const tailwindcss = require("tailwindcss");
const postcssPurgecss = require(`@fullhuman/postcss-purgecss`);

const purgecss = postcssPurgecss({
  // Specify the paths to all of the template files in your project.
  content: ["./public/**/*.html", "./src/**/*.vue"],
  // Include any special characters you're using in this regular expression.
  // See: https://tailwindcss.com/docs/controlling-file-size/#understanding-the-regex
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
  // Whitelist auto generated classes for transitions and router links.
  // From: https://github.com/ky-is/vue-cli-plugin-tailwind
  whitelistPatterns: [
    /-(leave|enter|appear)(|-(to|from|active))$/,
    /^(?!(|.*?:)cursor-move).+-move$/,
    /^router-link(|-exact)-active$/
  ]
});

module.exports = {
  plugins: {
    tailwindcss,
    autoprefixer,
    ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
  }
};

If I try to use a custom class in @apply e.g. my primary color it results in this error:

`@apply` cannot be used with `.bg-primary` because `.bg-primary` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.bg-primary` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.`

primary is shown by vs-code where i added stylelint so it seems that it detects but doesn't apply properly.

[forsartis]

Hello,
in your postcss.config.js, where you load tailwindcss as a plugin,
you need to change tailwindcss, to tailwindcss: {},.

// postcss.config.js
// ...
module.exports = {
  plugins: {
    tailwindcss: {},
// ...

[tomhave97]

Hey,
first thanks for the quick answer.
unfortunatly your solution didn't help to solve the issue :(

Could you explan how this should help ? Because adding it like this will result in having my required(tailwindcss) unused but it seems to be still working for the normal classes🤔

Also i guess that as i added my colour i override all mine and only have primary available (if it would work correctly),
So i tried adding it into the extends, but its still not working 😢

[forsartis]

That's weird, I copied your tailwind.config.js and postcss.config.js and first I had the same error. After I changed how the plugin gets loaded it worked.
As far as I know, when you require tailwindcss at the top postCSS doesn't pass along some context info such as current directory, which results in your tailwind.config.js not being loaded.

Can you post your package.json or better share a project that reproduces the problem?

[tomhave97]

https://github.com/tomhave97/tailwindbug

Here i created a small version of what is not running. but i also found out what the issue was/is.

The problem lies in the postcss.config. You were right by chaning the line to tailwindcss: {},
but the issue stayed. The problem was this const tailwindcss = require("tailwindcss");
After deleting that line it worked like a charm.
I still don't know why this creates these Problemes :D

But Thanks for your Help :)
I will close this as no bug, after you saw and maybe answered this :)

[forsartis]

You're welcome, I'm glad it works now.

[tomhave97]

Worked fine. Issues lied in postcss.config.