Shopify Theme Lab

CSS Frameworks

Remove Tailwind CSS

  1. Remove tailwindcss package.
npm uninstall tailwindcss
1
yarn remove tailwindcss
1
  1. Remove tailwind config.
rm src/tailwind.config.js
1
  1. Remove tailwind requires from .config/postcss.config.js.
module.exports = {
  plugins: [
    ...
-   require('tailwindcss/nesting'),
-   require('tailwindcss')(path.resolve(__dirname, '../src/tailwind.config.js')),
    ...
  ]
}



 
 



1
2
3
4
5
6
7
8
  1. Remove tailwindcss imports from src/css/main.css.
- @import "tailwindcss/base";
- @import "tailwindcss/components";

...

- @import "tailwindcss/utilities";
 
 



 
1
2
3
4
5
6

Bootstrap 5

Bootstrapopen in new window is the world’s most popular framework for building responsive, mobile-first sites.

  1. Install SASS/SCSS and update files accordingly.

  2. Install bootstrap package.

npm install bootstrap
1
yarn add bootstrap
1
  1. Import bootstrap into src/css/main.scss
@import "~bootstrap/scss/bootstrap";
1

Bulma

Bulmaopen in new window is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.

  1. Install SASS/SCSS and update files accordingly.

  2. Install bulma package.

npm install bulma
1
yarn add bulma
1
  1. Import bulma into src/css/main.scss
@import "~bulma/bulma";
1