Customize

CSS

How to create a new style?

To avoid file loss, overrides of your custom styles or any other conflicts during the upgrade process, create or modify your styles with add your custom css or scss in src/precss/tailwindcss.css file. If you want to add other plugin css, please paste css or scss in this file.

                      
                        /* Insert your css in here */
                        .test-class {
                            @apply relative;
                        }

Core Tailwind css in src/precss/tailwindcss.css file.

                      
                        :root {
  --primary:#6366F1;
  --secondary:#EC4899;
  --green:#22C55E;
  --yellow:#F59E0B;
  --gray:#84848f;
}

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

********************

plugins css

Remove all plugin css from this file.

More information about custom in Tailwindcss is in here

How Edit RTL CSS?

Add or edit rtl css from html file like thisltr:text-left rtl:text-right

More information about rtl in here Tailwind RTL

JS

How to create a new Javascript?

To avoid file loss, overrides of your custom styles or any other conflicts during the upgrade process, create or modify your custom javascript in src/js/demo.js file.

                      
                        // Custom JS
                        const myCustom = function () {
                          
                          // insert your javascript in here

                        }

How to edit Demo Javascript?

demo.js is a javascript that is used to display sample layouts such as charts, datepickers, vectormaps and event calendars. Copy some scripts you need and paste them in the footer before </body>. Replace the javascript demo value with the dynamic data you have.

Example:

                      
                          <!-- Demo Chart.js and all vendors config -->
                          <script src="src/js/demo.js"></script>

                          <script>
                            const date_range = document.getElementById('startDate');
                            if ( date_range != null) {
                              flatpickr('#startDate', {
                                enableTime: true,
                                allowInput: true,
                                dateFormat: "m/d/Y h:iK",
                                "plugins": [new rangePlugin({ input: "#endDate"})]
                              });
                            } 
                          </script>
                        </body>

Theme Skin

Tailback is ready in light and dark mode. Very simple to change color skin, just editing html file and add "dark" classes like this <html class="dark" lang="en">.

Read more information about Tailwind dark mode in here https://tailwindcss.com/docs/dark-mode

Theme Colors

We use a subset of Tailwindcss color palette for generating color schemes.
You can use text- or bg- before color like this text-indigo-500 or bg-indigo-600

Our primary color is text-indigo-. You can change all primary color on html file with change text-indigo- and bg-indigo- with others color.

We also use customize color for -gray-. Edit this color from tailwind.config.js

                      
extend: {
  colors: {
    gray: {
      50:  '#f8f7ff',
      100: '#f6f5ff',
      200:  '#eff0fe',
      300:  '#e0e0fc',
      400:  '#98A5C0',
      500:  '#6B7280',
      600:  '#282960',
      700:  '#1e1f48',
      800:  '#141430',
      900:  '#0a0a18'
    },
  }
},

More complete color can see in Official Tailwindcss

Option

You can change setting about Tailwindcss from this file. For example: Change Google fonts from tailwind.config.js

                
                  // tailwind.config.js
module.exports = {
  mode: 'layers',
  content: ['*.html/','./src/js/*.js',
    './docs/**/*.html','./ecommerce/*.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    fontFamily: {
      sans: ['Nunito', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

For more information about Theme configuration please read in here