• Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Register
  • Login
Bagisto Forum

Bagisto

  • Register
  • Login
  • Search
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups

adding custom colours to tailwind.config.js

General Discussion
2
6
191
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M
    malbe last edited by 16 Oct 2024, 13:41

    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

    A 1 Reply Last reply 17 Oct 2024, 04:46 Reply Quote 0
    • A
      amit-webkul @malbe last edited by 17 Oct 2024, 04:46

      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.

      M 1 Reply Last reply 17 Oct 2024, 11:28 Reply Quote 0
      • M
        malbe @amit-webkul last edited by 17 Oct 2024, 11:28

        @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

        A 1 Reply Last reply 18 Oct 2024, 04:16 Reply Quote 0
        • A
          amit-webkul @malbe last edited by 18 Oct 2024, 04:16

          @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.

          M 1 Reply Last reply 18 Oct 2024, 07:46 Reply Quote 0
          • M
            malbe @amit-webkul last edited by 18 Oct 2024, 07:46

            @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

            A 1 Reply Last reply 21 Oct 2024, 04:39 Reply Quote 0
            • A
              amit-webkul @malbe last edited by 21 Oct 2024, 04:39

              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.

              1 Reply Last reply Reply Quote 0
              4 out of 6
              • First post
                4/6
                Last post