Middleman with tailwindcss & postcss missing some custom styles from tailwind config

Support
1

Site: https://deploy-preview-2--delusioninabox.netlify.app/ (preview branch of delusioninabox.com)
Deploy Log: Netlify App

My site is built with middleman and uses webpack to use postcss & tailwind. I have a branch I’m working on which I updated a lot of gems to make the site up to date, and everything works locally. When the site deploys though, the tailwind css from the config is missing. It has some styles – like container and it’s breakpoints – but others, such as the styles for colors or margins, are missing.

When I run my build command locally (middleman build --verbose) all the styles are there. So I’m not sure what is happening that they’re missing from the deployed version. I’m wondering if my tailwind config needs an adjustment? I tried adding a npx tailwindcss command to the build process, but then it was creating a conflict with the cascade being read properly, so I would prefer it works in the proper order in webpack like it does locally.

webpack build in config.rb:

activate :external_pipeline,
  name: :webpack,
  command: build? ? './node_modules/webpack/bin/webpack.js --bail' : './node_modules/webpack/bin/webpack.js --watch --devtool source-map --color',
  source: ".tmp/dist",
  latency: 1

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
    require("postcss-minify")
  ]
}

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: 'production',
  entry: {
    application: './source/javascripts/application.js',
    styles: './source/stylesheets/styles.css',
  },
  //resolve: {
    //root: __dirname + '/source/javascripts',
  //},
  output: {
    path: __dirname + '/.tmp/dist',
    filename: 'javascripts/[name].js',
  },
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { importLoaders: 2 } },
          { loader: 'sass-loader' },
          { loader: 'postcss-loader' },
        ]
      }
    ],
  },
}

tailwind.config.js (minus theme styles)

module.exports = {
  content: ["./build/**/*.{html,js}", "./source/**/*.{html,js}"],
  presets: [],
  darkMode: 'media', // or 'class'
  options: {
    prefix: '',
    important: false,
  },
  plugins: [],
}

I’ve been trying a lot of combinations of things and not having any luck, so any help if appreciated! I wondered in the content path needs to be different for Netlify in the tailwind config? I wonder if the base @tailwind imports are working, but those generated from the config are not? But I’m not clear on why it works locally in dev and production mode, but just not once built in Netlify.

I did notice that in my local build log, there is a generated tailwind js file that does not get built on Netlify.

Thank you in advance!!

2

Hey there, @delusioninabox :wave:

Thanks so much for reaching out! Sorry to hear you are encountering an obstacle. I can see the difference between your deploy preview and the link to the live site that you shared, so thanks for including those in your message.

Would you be able to share your project repo or a demo repo that reproduces the same error so that we can look into this further? Additionally, you mention that you are updating a bunch of gems for your project-- are you updating tailwind in the process as well? We want to figure out exactly what you are updating so that we can focus on that :slight_smile:

Thanks so much!

3

Thanks Hillary!

Yes, Tailwind was also upgraded. I hadn’t had time to updated my site in a while, so it ended up being a lot and some big version jumps on some. :grimacing: Converting my tailwind config to the latest version was part of that.

I temporarily made my repo public so you can check out the branch version: https://github.com/delusioninabox/delusioninabox/pull/2

Thank you!!

5

Hey there, @delusioninabox :wave:

Thanks so much for sending that over, it is very helpful! I have taken a look and it appears that you are using outdated versions of tailwind and postcss in your build. Is this intentional? My suspicion is that this could be causing your issue, as you have upgraded your gem package but not your other packages.

Can you try updating both tailwind and postcss to their most recent versions? Here are some documents that may be helpful for you:

Let us know how this goes!

6

In my branch that updated the gems, I did update those also. See package.json here: https://github.com/delusioninabox/delusioninabox/pull/2/files

    "@webpack-cli/init": "^1.0.3",
    "autoprefixer": "^10.4.2",
    "cross-env": "^7.0.3",
    "css-loader": "^6.5.1",
    "mini-css-extract-plugin": "^2.4.5",
    "postcss": "^8.4.5",
    "postcss-cssnext": "^3.1.1",
    "postcss-import": "^14.0.2",
    "postcss-loader": "^6.2.1",
    "postcss-minify": "^1.1.0",
    "sass": "^1.47.0",
    "sass-loader": "^12.4.0",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.0.13",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"

Is the build not picking up this update?

7

Hey @delusioninabox,

You’ve added the following in your tailwind config:

content: ["./build/**/*.{html,js}", "./source/**/*.{html,js}"],

But your template files appear to be in .erb. I think you should change it to:

content: ["./source/**/*.{html,js,erb,markdown}"],
8

Oh, good call! That did the trick! Thanks so much!! :tada::tada::tada: