Overview

Bootwindscss is a framework that surges from forking bootstrap and cleaning, adapting it to properly work with tailwindcss utilities and principles.

The main purpose of it is to combine the best of both worlds, the easiness of pulling pre-made components from bootstrap library and the freedom to quickly customize them and style your hole website from your html.

For a better development experience we pull the docs from bootstrap and make the proper cleanup and adaptation of the examples so that you can copy and refactor as needed.

Installation

Add bootwindscss and tailwindcss dependencies to your project:

npm install bootwindscss
npm install tailwindcss

Then import the necessary files in your main css file. Remember, tailwindcss must come after bootwindcss so that you can use it's utilities to override defaults.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    @import "bootwindscss/dist/css/all.css";
}

Or you might as well import just what's needed

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    @import "bootwindscss/scss/functions";
    @import "bootwindscss/scss/variables";
    @import "bootwindscss/scss/mixins";
    @import "bootwindscss/scss/root";
    /* Your imports goes here */
    @import "bootwindscss/scss/buttons.scss";
}

Also, to sync up the color pallet, use the preset tw.preset.js in your tailwind.config.js file.

Docs website

https://bootwindscss.netlify.app/

Git repo

https://github.com/matzapata/bootwindscss