Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

TerrePorter's avatar

Vite missing tailwind classes

Hello,

I seem to be having an odd issue. I just made a new setup. The base install, Laravel 10, Breeze, and Livewire. That includes tailwinds, but for some reason some of the tailwinds classes are not being compiled.

I added my custom colors and those work but the base gray and red are not. bg-gray-900 for example, is missing. It's on the template. I added the script for the npm dev watch for vite. I am finding it odd that the custom colors are there but not the base colors.

Does anyone have any ideas?

0 likes
2 replies
LaryAI's avatar
Level 58

It seems like the issue might be related to the configuration of your Tailwind CSS setup. Here are a few steps you can try to resolve the problem:

  1. Make sure you have installed Tailwind CSS correctly by running the following command in your project directory:
npm install tailwindcss
  1. Check your tailwind.config.js file and ensure that the theme section includes the desired colors. For example, if you want to use the bg-gray-900 class, make sure the colors section in your tailwind.config.js file includes the corresponding gray shade. Here's an example:
module.exports = {
  theme: {
    extend: {
      colors: {
        gray: {
          '900': '#333333',
        },
      },
    },
  },
  // ...
};
  1. If the above steps don't work, try purging your CSS to ensure that the Tailwind CSS classes are not being removed during the build process. In your tailwind.config.js file, make sure the purge section is properly configured to include all the necessary files. Here's an example:
module.exports = {
  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  // ...
};
  1. Finally, restart your development server and rebuild your assets to see if the missing classes are now being compiled correctly.

If the issue persists, it might be helpful to provide more details about your project setup, including your tailwind.config.js file and any relevant code snippets, so that the community can better assist you.

TerrePorter's avatar

no help there Mr. Ai

However, I stumbled upon a solution though it makes no sense.

https://stackoverflow.com/questions/70704377/default-colors-given-in-tailwind-documentation-are-not-working

lead me to

https://tailwindcss.com/docs/customizing-colors#using-the-default-colors

which says I now need to actually include the default colors instead of them being the 'defaults'...

const colors = require('tailwindcss/colors')

then using the first link add

...colors 

under my custom colors. And poof the grays and reds now work... very anoying.

Why did this change to vite? or was this a tailwinds change that was the problem? This is a pain in the butt, I don't see the reasons for the changes. The old stuff worked, this new crap is being crap.

1 like

Please or to participate in this conversation.