adding custom colours to tailwind.config.js

malbe

Hello,

I'm using the latest version, and in packages>Webkul>Shop>tailwind.config.js

I'm trying to add my custom colours, so I can style this correctly, you already have

            colors: {
                navyBlue: "#060C3B",
                lightOrange: "#F6F2EB",
                darkGreen: '#40994A',
                darkBlue: '#0044F2',
                darkPink: '#F85156',
            },

I know how to add my colours, I just don't know how to rebuild the assets folder to reflect the changes.

any help is appreciated.

Cheers
Mal

amit-webkul

Hello @malbe,

Regarding your query, I believe you have added your custom color class in the config file.

To create a new build of the assets, please follow the steps below:

Step 1: Navigate to the shop folder and open the integrated terminal.

Step 2: Run the command npm install to install the required NPM packages.

Step 3: Run the command npm run build to rebuild the assets.

Please let us know if you encounter any issues while following these steps.

malbe

@amit-webkul

That didn't work, adding the colours to packages>Webkul>Shop>tailwind.config.js

however adding the colours to packages>Webkul>Shop>Resources>assets>css>app.css
using standard CSS, it added it when I ran npm run build within the Shop folder.

Cheers
Mal

amit-webkul

@malbe

If you have added your custom CSS class in tailwind.config.js, use that color in your blade file. For development time changes refelection, you can run the command npm run dev in your terminal. It will reflect your changes on to your website in live mode.

After completing the development, run the command npm run build for the final build.

malbe

@amit-webkul

It doesn't work adding it to the config file, I have adopted the method someone at Bagisto has used and added it to packages>Webkul>Shop>Resources>assets>css>app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

**** About 550 custom CSS classes ****

so it compiles when I run npm run dev or npm run build

For some reason, it doesn't compile this part in the config file

extend: {
            colors: {
                navyBlue: "#060C3B",
                lightOrange: "#F6F2EB",
                darkGreen: '#40994A',
                darkBlue: '#0044F2',
                darkPink: '#F85156',
            },

Cheers
Mal

amit-webkul

Hello @malbe

As I checked, it is predefined CSS classes in the Bagisto Shop package. And it works properly.

If you add another CSS class, follow the sequence, so before npm compilation you need to use that custom CSS class in the blade file. After that, you compile the file and it will work perfectly.