Installing Sage 10 with Bootstrap 5

Hi everybody,

When installing Sage 10 using :
composer create-project roots/sage your-theme-name dev-master

I don’t get the option to choose css framework, TailWind is installed by default!!

Is there a way to install Sage 10 along with bootstrap 5 ? Im i missing something ?

Is is safe to work with sage 10 on a new project ?


Hey @Tartamata - Sage 10 does not yet have an installer/support for choosing a different CSS framework

You can definitely swap out Tailwind for Bootstrap in Sage 10, but you’ll have to do so manually for now

Thank you @ben
How can i do it manually ?

You’d swap out the dependencies and any references to Tailwind classes in the styles and Blade templates

1 Like

Ok, thank you @ben

This is a very brief walkthrough:

  1. git clone

  2. mv themes/sage themes/projectname

  3. cd themes/projectname

  4. composer install

  5. rm tailwind.config.js

  6. yarn remove @tailwindcss/typography

  7. yarn remove tailwindcss

  8. remove postCss: [require(‘tailwindcss’)], from webpack.mix.js

  9. remove all tailwind references from resources/styles

  10. yarn add bootstrap

  11. touch resources/styles/config/external.scss && touch resources/styles/config/variables.scss

  12. import bootstrap in resources/styles/config/external.scss

  13. in resources/styles/app.scss, import config/variables & config/external

  14. update blade files with bootstrap classes

  15. optional: configure postcss

    const mix = require(‘laravel-mix’);
    const path = require(‘path’);


    Mix Asset Management
    Mix provides a clean, fluent API for defining some Webpack build steps
    for your Sage application. By default, we are compiling the Sass file
    for your application, as well as bundling up your JS files.



    .sass(‘resources/styles/app.scss’, ‘styles’)
    .sass(‘resources/styles/editor.scss’, ‘styles’)
    extend: { content: [path.join(__dirname, ‘index.php’)] },
    safelist: require(‘purgecss-with-wordpress’).safelist,
    processCssUrls: false,

    .js(‘resources/scripts/app.js’, ‘scripts’)
    .js(‘resources/scripts/customizer.js’, ‘scripts’)
    .blocks(‘resources/scripts/editor.js’, ‘scripts’)
    .autoload({ jquery: [’$’, ‘window.jQuery’] })

    .copy(‘resources/fontawesome-icons.json’, ‘public/fontawesome-icons.json’)
    .copyDirectory(‘resources/images’, ‘public/images’)
    .copyDirectory(‘resources/fonts’, ‘public/fonts’);



Thanks @tombro, i’ll give it a try

This topic was automatically closed after 42 days. New replies are no longer allowed.