tailwind-bootstrap-grid
Advanced tools
Tailwindcss plugin to generate Bootstrap flexbox grid system.
Bootstrap v4 flexbox grid system as a tailwindcss plugin.
Check the demo.
npm i -D tailwind-bootstrap-grid
In tailwind.js file:
module.exports = {
plugins: [require('tailwind-bootstrap-grid')()],
};
And don't forget to include components and utilities in your tailwind base
css file:
@tailwind preflight;
@tailwind components;
@tailwind utilities;
This will generate Boostrap v4 flexbox grid.
gridColumns (default - 12) - grid sizegridGutterWidth (default - "30px") - gutter widthgenerateContainer (default - true) - whether to generate .container and
.container-fluid classesgenerateNoGutters (default - true) - whether to generate .no-gutter classcontainerMaxWidths (default -
{ sm: '540px', md: '720px', lg: '960px', xl: '1140px' }) - the max-width
container value for each breakpointFor example to generate 10 column grid with no gutter and skip the container:
module.exports = {
plugins: [
require('tailwind-bootstrap-grid')({
gridColumns: 10,
gridGutterWidth: 0,
generateNoGutters: false,
generateContainer: false,
}),
],
};
no-gutters class doesn't fully support itMIT
FAQs
Tailwind CSS plugin to generate Bootstrap flexbox grid system.
The npm package tailwind-bootstrap-grid receives a total of 4,286 weekly downloads. As such, tailwind-bootstrap-grid popularity was classified as popular.
We found that tailwind-bootstrap-grid demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
npm now supports Trusted Publishing with OIDC, enabling secure package publishing directly from CI/CD workflows without relying on long-lived tokens.
Research
/Security News
A RubyGems malware campaign used 60 malicious packages posing as automation tools to steal credentials from social media and marketing tool users.
Security News
The CNA Scorecard ranks CVE issuers by data completeness, revealing major gaps in patch info and software identifiers across thousands of vulnerabilities.