Tailwind and Bootstrap dictionary
Created a small dictionary that helps translate Tailwind to Bootstrap classes
posted by 
Sink
Bootstrap vs Tailwind CSS Classes Comparison
I have found a more relevant updated source for this.
These are some frequently used examples
Layout & Container
| Category | Bootstrap | Tailwind |
|---|---|---|
| Container | container, container-fluid | container, mx-auto |
| Display | d-flex, d-grid, d-block, d-none | flex, grid, block, hidden |
| Flex Direction | flex-row, flex-column | flex-row, flex-col |
| Flex Properties | flex-grow-1, flex-shrink-0 | flex-1, flex-grow, shrink-0 |
| Grid | row, col, col-12 | grid, grid-cols-12 |
| Gap | gap-1, gap-2, gap-3 | gap-1, gap-2, gap-4 |
Spacing
| Category | Bootstrap | Tailwind |
|---|---|---|
| Margin | m-1, m-2, m-3, m-4, m-5 | m-1, m-2, m-4, m-8, m-16 |
| Margin Directions | mt-3, mb-3, ms-3, me-3 | mt-4, mb-4, ml-4, mr-4 |
| Padding | p-1, p-2, p-3, p-4, p-5 | p-1, p-2, p-4, p-8, p-16 |
| Padding Directions | pt-3, pb-3, ps-3, pe-3 | pt-4, pb-4, pl-4, pr-4 |
Typography
| Category | Bootstrap | Tailwind |
|---|---|---|
| Font Size | fs-1, fs-2, fs-3, fs-4, fs-5, fs-6 | text-xs, text-sm, text-base, text-lg, text-xl, text-2xl |
| Font Weight | fw-bold, fw-normal, fw-light | font-bold, font-normal, font-light |
| Text Align | text-start, text-center, text-end | text-left, text-center, text-right |
| Text Color | text-primary, text-secondary, text-danger | text-blue-500, text-gray-500, text-red-500 |
Backgrounds & Colors
| Category | Bootstrap | Tailwind |
|---|---|---|
| Background Color | bg-primary, bg-secondary, bg-success | bg-blue-500, bg-gray-500, bg-green-500 |
| Text Color | text-primary, text-muted, text-white | text-blue-500, text-gray-500, text-white |
| Opacity | opacity-25, opacity-50, opacity-75 | opacity-25, opacity-50, opacity-75 |
Borders & Shadows
| Category | Bootstrap | Tailwind |
|---|---|---|
| Border | border, border-1, border-2 | border, border-2, border-4 |
| Border Color | border-primary, border-secondary | border-blue-500, border-gray-500 |
| Border Radius | rounded, rounded-sm, rounded-lg | rounded, rounded-sm, rounded-lg |
| Shadow | shadow-sm, shadow, shadow-lg | shadow-sm, shadow, shadow-lg |
Positioning
| Category | Bootstrap | Tailwind |
|---|---|---|
| Position | position-relative, position-absolute | relative, absolute |
| Top/Right/Bottom/Left | top-0, start-0, bottom-0, end-0 | top-0, right-0, bottom-0, left-0 |
| Z-index | z-0, z-1, z-2, z-3 | z-0, z-10, z-20, z-30 |
Flexbox & Grid Utilities
| Category | Bootstrap | Tailwind |
|---|---|---|
| Justify Content | justify-content-start, justify-content-center | justify-start, justify-center |
| Align Items | align-items-start, align-items-center | items-start, items-center |
| Flex Wrap | flex-wrap, flex-nowrap | flex-wrap, flex-nowrap |
| Order | order-1, order-2, order-3 | order-1, order-2, order-3 |
Responsive Design
| Category | Bootstrap | Tailwind |
|---|---|---|
| Breakpoints | sm, md, lg, xl, xxl | sm, md, lg, xl, 2xl |
| Usage Example | col-md-6, d-lg-none | md:w-1/2, lg:hidden |
Hover & Focus States
| Category | Bootstrap | Tailwind |
|---|---|---|
| Hover | :hover (via CSS) | hover:bg-blue-600, hover:text-white |
| Focus | :focus (via CSS) | focus:ring, focus:border-blue-500 |
| Active | :active (via CSS) | active:bg-blue-700 |
Key Differences:
- Bootstrap uses descriptive class names (e.g.,
text-center), while Tailwind uses more atomic/utility classes - Bootstrap uses numbered scale (1-5), Tailwind uses larger range and different scales
- Tailwind has more granular control over colors and sizes
- Bootstrap includes pre-built components, Tailwind is purely utility-first
- Bootstrap uses words like "start/end" for RTL support, Tailwind uses "left/right"
- Tailwind's responsive design uses prefixes, Bootstrap uses infix notation
- Tailwind has built-in state variants (hover:, focus:, etc.), Bootstrap relies more on CSS
Tell me what you think