Futurism

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 src/tailwindcss/tailwindcss.css

Futurism allows you to customize the default color palette by editing the src/tailwindcss/tailwindcss.css 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 font and color to your Futurism project: 


@import "tailwindcss";
@theme {
    --font-sans: "Rajdhani", "sans-serif"; 
    --font-serif: "Merriweather", "sans-serif";

    /* Primary Colors */
    --color-primary-50: oklch(98.48% 0.0209 189.59);
    --color-primary-100: oklch(96.39% 0.0518 190.41);
    --color-primary-200: oklch(93.92% 0.0913 191.47);
    --color-primary-300: oklch(89.27% 0.152 195.81);
    --color-primary-400: oklch(81.47% 0.1385 198.28);
    --color-primary-500: oklch(69.37% 0.1184 204.81);
    --color-primary-600: oklch(58.89% 0.0991 193.92);
    --color-primary-700: oklch(50.01% 0.0828 208.26);
    --color-primary-800: oklch(43.79% 0.0713 212.45);
    --color-primary-900: oklch(33.21% 0.0566 215.01);
    --color-primary-950: oklch(19.34% 0.0256 199.77);
}

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.