Sage v10 Docs

Appearance

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:

shell
yarn remove @roots/bud-tailwindcss

2. Remove Tailwind from your CSS ​

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

css
@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:

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

And replace with the following line:

diff
+      .enable()

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

5. Remove Tailwind types from jsconfig.json ​

diff
-      "@roots/bud-tailwindcss",

Adding Bootstrap ​

1. Setup support for Sass ​

See the Sass setup guide

2. Install Bootstrap ​

Add Bootstrap as a dependency:

shell
yarn add bootstrap

Add Popper as a dependency:

shell
yarn add @popperjs/core

3. Import Bootstrap's Javascript ​

Open resources/scripts/app.js and add:

javascript
// Import Bootstrap
import 'bootstrap';

4. Import Bootstrap styles ​

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

css
@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.