Skip to content
  • Sage page

Replacing Tailwind CSS with Bootstrap

Sage 10 ships with Tailwind CSS, but many users may wish to use Bootstrap, or another CSS framework.

# Removing Tailwind CSS

# 1. Remove Tailwind dependencies

Remove the @roots/bud-tailwindcss extension:

yarn remove @roots/bud-tailwindcss

# 2. Remove Tailwind from your CSS

Open resources/styles/app.css and delete the following lines:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

# 3. Delete the Tailwind config file

Delete tailwind.config.js from your theme.

4. Remove the Tailwind theme.json generator from the Bud config

Open bud.config.js from your theme and remove the following lines:

-      .useTailwindColors()
-      .useTailwindFontFamily()
-      .useTailwindFontSize()

And replace with the following line:

+      .enable()

See Managing theme.json in the Bud extension docs for more details.

5. Remove Tailwind types from jsconfig.json

-      "@roots/bud-tailwindcss",

# Adding Bootstrap

# 1. Setup support for Sass

See the Sass setup guide

# 2. Install Bootstrap

Add Bootstrap as a dependency:

yarn add bootstrap

Add Popper as a dependency:

yarn add @popperjs/core

# 3. Import Bootstrap's Javascript

Open resources/scripts/app.js and add:

// Import Bootstrap
import 'bootstrap';

# 4. Import Bootstrap styles

Open your theme's resources/styles/app.scss file add the following lines:

@import 'bootstrap/scss/bootstrap';

Note: You may wish to import only the parts of Bootstrap you plan to use in your theme. You can learn more about importing just the parts you need here.


Last updated

Support Roots

Help us continue to build and maintain our open source projects. We’re a small team of independent developers and every little bit helps.

Sponsor Roots on GitHub