Sage 9 with TailwindCss yarn build:production is missing styles. The most suggested fix is not working for me

sage
1

I am using sage 9.0.9 with TailwindCss.

Whenever I run yarn build:production, I am missing some styles and I can’t seem to fix it.

Every forum I visit suggests going to Missing styles on build:production when using Bootstrap 4 navbar · Issue #2017 · roots/sage · GitHub and using

$navbar-dark-toggler-icon-bg: none;
$navbar-light-toggler-icon-bg: none;

in the _variables.scss file.

This fix has not worked for me. It seems that the issue is related to bootstrap 4.0.0 for most people, but I am not using bootstrap with this Sage install, so I am curious as to what could be causing this issue.

Either it is user error on my end and I may be missing some context, or there is something else that could be causing this issue.

Any help or direction would be appreciated. Thank you!

2

hello,

did you try to upgrade Tailwind to 1.4?

yarn add -D tailwindcss

then modifiy the tailwind.config.js AND CHECK THE PATHS

const { PWD } = process.env; // This will not have a trailing slash

module.exports = {
  purge: {
     content: [
      `${PWD}/resources/views/**/*.blade.php`,
      `${PWD}/resources/views/layouts/*.blade.php`,
      `${PWD}/resources/views/partials/*.blade.php`,
      `${PWD}/resources/assets/scripts/**/*.{js,vue}`,
    ],
  },

see: Using Tailwind CSS 1.4’s built-in PurgeCSS Options with Sage 9

3

How did you install Tailwind? With the Sage installer through Composer? This shouldn’t be an issue if you’ve done that (you have to say “yes” on the overwrite files step too).