Theme Colours

BladewindUI ships with twelve colours from the TailwindCSS palette. The default colour used for the BladewindUI components is blue.

 

You can tell from the palette above that BladewindUI uses Emerald for its green and Amber for its yellow. As stated earlier, the default colour used for the BladewindUI components is blue. If your primary theme is not blue, you can change this in a few steps. This assumes you have some basic knowledge of Tailwind CSS.

Below if the tailwind.config.js file that ships with the library.

    
// your-project/vendor/mkocansey/bladewind/tailwind.config.js
  theme: {
    extend: {
      colors: {
        primary: colors.blue,
        secondary: colors.slate,
        dark: colors.gray,
        green: colors.emerald,
      }
},

If the default colours used in the library fit your project's colour theme you don't need to perform this next step. To change the colours used above, simply define overwriting values in your project's tailwind.config.js. This documentation website uses indigo as its primary colour.

    
        // your-project/tailwind.config.js
  theme: {
    extend: {
      colors: {
        primary: colors.indigo,
        secondary: colors.zinc,
        dark: colors.gray,
        green: colors.emerald,
      }
},
    
    

All components use the colour defined in the primary key above to display their background colour. This makes it easy for all components to quickly blend in to your preferred theme. From the example above, now all components will use shades of indigo as their background colour instead of blue.

If you are feeling geeky

The changes to the Tailwind config should be enough to get you your right colours. If however, for some reason you are in your geeky elements and prefer to access all the uncompiled BladewindUI CSS files, you can run the command below.

        
            php artisan vendor:publish --tag=bladewind-assets --force
        

You should now have in your public directory, a vendor > bladewind > assets folder containing all the uncompiled tailwind css files. You can modify these files to suit your theme specification. Refer to this article if you are not familiar with compiling assets in Laravel.

Debug Compilation Issues

As explained earlier, BladewindUI allows you to define your own colour theme in your project's tailwind.config.js file. The BladewindUI styles will get compiled once you build your assets. Since publishing the BladewindUI assets is completely optional, your components will still exist in vendor/mkocansey/bladewind if you have not published the Bladewind components. In that case you will need to tell Tailwind to also compile the CSS classes in vendor/mkocansey/bladewind as shown in the code below.

    
        // your-project/tailwind.config.js
        ...
        module.exports = {
          darkMode: 'class',
          content: [
              "./resources/**/*.blade.php",
              "./resources/**/*.js",
              "./vendor/mkocansey/bladewind/resources/views/**/*.blade.php",
          ],
        ...