Customize

Glassmorp is highly customizable, allowing you to tailor your project’s CSS, JavaScript, color scheme, and plugins to meet your specific needs. Follow this guide to learn how to modify these elements within your Glassmorp project.

Customize CSS

You can easily customize the CSS within your Glassmorp project by adding or modifying styles in the src/tailwindcss/ directory. Glassmorp uses Tailwind Css for its styles, allowing for more flexible and maintainable CSS.

To add custom styles, simply create a new CSS file in the src/tailwindcss/tailwindcss.css or edit directly in HTML code.

Customize JavaScript

Glassmorp provides a robust JavaScript setup using modern ES6+ features and Alpine js. To customize JavaScript, you can add or modify scripts in the src/js/ directory. Alpine js can edit directly in HTML code.

Customize Colors in tailwind.config.js

Glassmorp allows you to customize the default color palette by editing the tailwind.config.js file. You can add custom colors, modify existing ones, or extend the default palette to fit your design needs.

Here’s an example of how to add a custom color to your Glassmorp project:

module.exports = {
  theme: {
    extend: {
      colors: {
        customcolor: {
           50: '#f8f8f8',
           // and other colors
        }    
      },
    },
  },
};
            

After updating the configuration, run npm run dev to apply your changes.

Additional Plugins

Glassmorp supports the use of additional plugins to further extend its capabilities. You can add plugins for features like dropzone, simplemde, datepicker or others.