2

using specific pixel width (e.g. w-[50px]) with tailwind CSS and nextjs but when deployed to production (on Vercel) the specified width doesn't show up, locally it works fine. Is there something wrong with my posts configuration that's causing it to not read tailwind's arbitrary width values?

here's my postcss.config.js

module.exports = {
  plugins: [
    "tailwindcss",
    process.env.NODE_ENV === "production"
      ? [
          "@fullhuman/postcss-purgecss",
          {
            content: [
              "./pages/**/*.{js,jsx,ts,tsx}",
              "./components/**/*.{js,jsx,ts,tsx}",
              "./stories/**/*.{js,jsx,ts,tsx}",
            ],
            defaultExtractor: (content) =>
              content.match(/[\w-/:]+(?<!:)/g) || [],
          },
        ]
      : undefined,
    "autoprefixer",
  ],
};

tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  variants: {
    extend: {
      opacity: ["disabled"],
    },
  },
};

https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values

nextjs version -- "next": "12.1.0"

purgecss version -- "@fullhuman/postcss-purgecss": "^4.1.3

tailwind CSS version -- ^3.0.18

the NODE_ENV has also been set to production on Vercel when deployed and checked on production

user3226932
  • 2,042
  • 6
  • 39
  • 76
  • 1
    Try removing the PurgeCSS configuration from `postcss.config.js`. Tailwind CSS will take care of purging unused styles if you use `content` in its config. – juliomalves Oct 23 '22 at 11:45
  • that worked thanks! any pointers on how to understand how the purging works underneath? i'm not sure how postcss and tailwind are working together here – user3226932 Oct 25 '22 at 02:53

0 Answers0