Tailwind in production stripping classes issue

rubyonrails-talk
1

Me again! Ive managed to get everything deployed, but now stuck on tailwindcss.

Everything works on the development environment, but when deployed it strips all the classes exept the colours. Heres the tailwind.config.js file:

module.exports = {
  content: [
  "./app/**/*.rb",
  "./app/**/*.html.erb",
  "./app/**/*.html.slim",
  "./app/**/*.html.haml",
  "./app/javascript/**/*.{js,jsx,ts,tsx}",
  "./config/**/*.rb",
]
  safelist: [/.*/],
  theme: {
    colors: {
      primary: "#E9426D",
      secondary: "#4DBED0",
      transparent: "transparent",
      current: "currentColor",
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      red: colors.red,
      neutral: colors.neutral,
      green: colors.green,
      amber: colors.amber,
      yellow: colors.yellow,
    },
    fontFamily: {},
    extend: {
      spacing: {},
    },
  },
};

Not sure where else to look. This is the file as is where ive been playing…

2

So ive been playing around with this for a few days now and still no luck. It works perfectly fine in development where all the css is correct. As soon as it deploys to a droplet it strips all the classes like w-10 etc bar the 2 colours i added to the theme.

Not sure why I’m having so many issues with this, but it a new rails project with no extras and then just doing a standard deploy to a droplet using kamal2.

Im at a loss with this and am either going to have to just use the CDN or go back to Laravel.

My updated application.css file is like so:

@import "tailwindcss";
@config '../../../config/tailwind.config.js';

@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

@theme {
  --color-primary: #e9426d;
  --color-secondary: #4dbed0;
}

And the tailwind.config.js file:

module.exports = {
  content: [
    "../app/views/**/*.{html,erb,haml,slim}",
    "../app/helpers/**/*.rb",
    "../app/components/**/*.{rb,erb}",
    "../app/javascript/**/*.js",
  ],
  safelist: [/.*/],
};
3

I am also experiencing similar issues. Cleaning the assets seems to help.

4

I ran into an issue like this with tailwind and the new version it turned out to be a problem on my macbook with docker

This is my post on reddit and someone did help me

You need to go to setting and virtualization settings and make sure you are not using apple virtualization

5

Ah that’s interesting, I was looking at something late last night about the manifest file and it was something I was going to look into but, in all honesty I don’t know enough about. But this looks like a possible route.

Thank you, I’ll report back when I’ve give it a shot.

6

So tried the Settings in Docker and switched to Docker VMM, but didn’t help. What I ended up doing was to change the config.assets.compile to false and then added config.assets.manifest = Rails.root.join('config', 'manifest.json'). I did leave it on Docker VMM in docker though so maybe it helped.

Not sure why the config.assets.compile was set to true. Likely something I changed when messing around trying to get it to work.

Thanks for spotting that one, it got me to the next step.

Cheers

1 Like
7

It was most likely the docker settings if you were on mac and had that apple virtualization setting checked thats sure to break tailwind

I dont think config.assets.compile is standard anymore so thats good you removed it

Also im happy you solved your problem that is what matters im happy for you

1 Like
8

Please see When I run my app in productions tailwind doenst build assets · Issue #524 · rails/tailwindcss-rails · GitHub

1 Like