Ask A Question

Notifications

You’re not receiving notifications from this thread.

error with purgecss and Tailwind 2

Leon Entrup asked in Javascript

Hey there, I am facing the following problem. In production, purgecss is preventing all all css from @tailwindcss/forms from being rendered properly. When I comment out purgecss everything is working just fine. The forms are located in the following file:

/app/views/boater/boats/new.html.erb

Here is my postcss.config.js :

let environment = {
  plugins: [
    require("tailwindcss")("tailwind.config.js"),
    require('autoprefixer'),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    }),
  ]
}

if (process.env.RAILS_ENV === "production") {
  environment.plugins.push(
    require('@fullhuman/postcss-purgecss')({
      content: [
        './app/**/*.html.erb',
        './app/**/**/*.html.erb',
        './app/**/*.html.haml',
        './app/helpers/**/*.rb',
        './app/javascript/**/*.js'
      ],
      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
    })
  )
}

module.exports = environment

My package.json can be found here:

https://pastebin.com/3BV5uHMN

My tailwind.config.js can be found here:
https://pastebin.com/9e3uE3g6

Reply

There's some discussion about this on the GitHub repo: https://github.com/tailwindlabs/tailwindcss-forms/issues/12

Reply

wow, thank you Chris for the quick reply. I am deeply grateful for the work you're doing. Always listen to the podcast too.

Reply

You're welcome and thanks for all the support! 🙏❤️

I think we didn't have the issue with Jumpstart Pro because I have some examples in the docs or something, so ours didn't get purged.

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 86,796+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.