Most of the CSS uses the tailwind CSS utility, so you only need to edit directly via the HTML file.

You can add custom CSS for example from plugins/vendors in the file /src/tailwindcss/tailwindcss.css

Most of the JS uses syntax from Alpine JS, so you only need to edit it directly via the HTML file.

You can add custom js for example from plugins/vendors in the /src/js/**.js and /src/vendors/**/**.js folder

To customize the color directly, you can do it via the HTML file by editing the Tailwind CSS class color. The following is a color map used in the Brutalism template.

*-Neutral-*

*-lime-*

*-Blue-*

*-Red-*

*-Yellow-*

*-Pink-*

To make it easier for you to edit primary and neutral colors, we provide css variable color. You don't need to edit all html just to change lime and neutral colors.

Please edit the tailwind.config.js file then change the lime and neutral colors to your favorite colors.

            
              variables: {
                DEFAULT: {
                  colors: {
                    lime: {
                      50:  '#f7fee7',
                      100:  '#ecfccb',
                      200:  '#d9f99d',
                      300:  '#bef264',
                      400:  '#a3e635',
                      500:  '#84cc16',
                      600:  '#65a30d',
                      700:  '#4d7c0f',
                      800:  '#3f6212',
                      900:  '#365314',
                      950:  '#1a2e05'
                    },
                    neutral: {
                      50:  '#fafafa',
                      100:  '#f5f5f5',
                      200:  '#e5e5e5',
                      300:  '#d4d4d4',
                      400:  '#a3a3a3',
                      500:  '#737373',
                      600:  '#525252',
                      700:  '#404040',
                      800:  '#262626',
                      900:  '#171717',
                      950:  '#0a0a0a'
                    }     
                  }
                }
              }
            
          

Css Variable Color

You can also easily edit colors directly on css production without having to use npm tools. Use this variable to change the theme color with various variants.

            
              :root {
                --colors-lime-50: #f7fee7;
                --colors-lime-100: #ecfccb;
                --colors-lime-200: #d9f99d;
                --colors-lime-300: #bef264;
                --colors-lime-400: #a3e635;
                --colors-lime-500: #84cc16;
                --colors-lime-600: #65a30d;
                --colors-lime-700: #4d7c0f;
                --colors-lime-800: #3f6212;
                --colors-lime-900: #365314;
                --colors-lime-950: #1a2e05;
                --colors-lime-50-rgb: 247,254,231;
                --colors-lime-100-rgb: 236,252,203;
                --colors-lime-200-rgb: 217,249,157;
                --colors-lime-300-rgb: 190,242,100;
                --colors-lime-400-rgb: 163,230,53;
                --colors-lime-500-rgb: 132,204,22;
                --colors-lime-600-rgb: 101,163,13;
                --colors-lime-700-rgb: 77,124,15;
                --colors-lime-800-rgb: 63,98,18;
                --colors-lime-900-rgb: 54,83,20;
                --colors-lime-950-rgb: 26,46,5;
                --colors-neutral-50: #fafafa;
                --colors-neutral-100: #f5f5f5;
                --colors-neutral-200: #e5e5e5;
                --colors-neutral-300: #d4d4d4;
                --colors-neutral-400: #a3a3a3;
                --colors-neutral-500: #737373;
                --colors-neutral-600: #525252;
                --colors-neutral-700: #404040;
                --colors-neutral-800: #262626;
                --colors-neutral-900: #171717;
                --colors-neutral-950: #0a0a0a;
                --colors-neutral-50-rgb: 250,250,250;
                --colors-neutral-100-rgb: 245,245,245;
                --colors-neutral-200-rgb: 229,229,229;
                --colors-neutral-300-rgb: 212,212,212;
                --colors-neutral-400-rgb: 163,163,163;
                --colors-neutral-500-rgb: 115,115,115;
                --colors-neutral-600-rgb: 82,82,82;
                --colors-neutral-700-rgb: 64,64,64;
                --colors-neutral-800-rgb: 38,38,38;
                --colors-neutral-900-rgb: 23,23,23;
                --colors-neutral-950-rgb: 10,10,10;
              }