Customize

Futurism 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 Futurism project.

Customize CSS

You can easily customize the CSS within your Futurism project by adding or modifying styles in the src/tailwindcss/ directory. Futurism 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

Futurism 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

Futurism 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 Futurism project:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
           50: '#ebfffd',
          100: '#ccfffb',
          200: '#9ffffa',
          300: '#02fafc',
          400: '#00dde3',
          500: '#00b1bf',
          600: '#0a8f8e',
          700: '#0e707c',
          800: '#105c69',
          900: '#043d48',
          950: '#051819'
        }    
      },
    },
  },
};
            

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

Additional Plugins

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