CODEWITHSUNDEEP
javascriptcsslaraveltailwind-css
Sjos Sivlingworkz
Sjos Sivlingworkz

Reputation: 187

Tailwind CSS .bg-color classes aren't being compiled by Laravel mix

I'm using Tailwind CSS for the first time in my Laravel project. I followed the documentation on the Tailwind CSS website to install Tailwind. After some usage, I noticed my .bg-color classes didn't work. Eventually, I realized the classes weren't even being compiled because there were no classes named .bg-color in the public/app.css file. As far as I know, all the other CSS classes DO work. Has anybody had this issue before or does anybody how to solve this?

This is my webpack.mix.js file.

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require("tailwindcss"),
    ]);

This is my tailwind.config.js file.

module.exports = {
  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      'maindarkblue' : "#061C23",
    },

    extend: {
      backgroundImage: theme => ({
        'plane1' : "url('/background_images/plane1.JPG')",
        'plane2' : "", 
        'mountains' : "url('/background_images/mountains.jpg')", 
        'skyline' : "", 
        'flower' : "", 
        'denzel1' : "", 
        'denzel2' : "",
      })
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

This is my resources/app.css

/* ./resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base { 
    h1 { 
        @apply font-serif text-8xl text-maindarkblue;
    }
    
    h3 { 
        @apply font-serif font-light text-lg text-maindarkblue;
    }
}

Any help is very much appreciated.

Upvotes: 2

Views: 1689

Answers (1)

juliomalves
juliomalves

Reputation: 50278

If you still want to use Tailwind's default colors you'll need to extend rather than completely overwriting the colors in the config.

theme: {
    // ...
    extend: {
        // ...
        colors: {
            'maindarkblue': "#061C23",
        }
    }
}

Upvotes: 2

Related Questions