CheatSheet

Distinguish Between Bootstrap and Tailwind Classes

# Feature Tailwind CSS Bootstrap
1 Text Color text-red-500 text-danger
2 Background Color bg-blue-500 bg-primary
3 Margin m-4 m-4
4 Padding p-4 p-4
5 Font Size text-xl fs-4
6 Font Weight font-bold fw-bold
7 Border Radius rounded-lg rounded
8 Display block d-block
9 Flexbox Container flex d-flex
10 Grid Container grid d-grid
11 Text Alignment text-center text-center
12 Width w-1/2 w-50
13 Height h-16 h-100
14 Shadow shadow-lg shadow-lg
15 Opacity opacity-50 opacity-50
16 Position absolute position-absolute
17 Top/Bottom/Left/Right top-0 top-0
18 Z-Index z-10 z-index-10
19 Overflow overflow-hidden overflow-hidden
20 Cursor cursor-pointer cursor-pointer
21 Transition transition-all transition
22 Animation animate-bounce animate-bounce
23 Grid Column Span col-span-2 col-2
24 Flex Direction flex-row flex-row
25 Justify Content justify-center justify-content-center
26 Align Items items-center align-items-center
27 Gap gap-4 gap-4
28 Order order-1 order-1
29 Visibility visible visible
30 Pointer Events pointer-events-none pointer-events-none
31 Background Gradient bg-gradient-to-r bg-gradient
32 Border Color border-red-500 border-danger
33 Border Width border-2 border-2
34 Border Style border-dashed border-dashed
35 Border Opacity border-opacity-50 border-opacity-50
36 Box Shadow shadow-md shadow-md
37 Font Family font-sans font-sans-serif
38 Font Style italic fst-italic
39 Letter Spacing tracking-wide letter-spacing-wide
40 Line Height leading-loose lh-loose
41 Max Width max-w-full mw-100
42 Text Transform uppercase text-uppercase
43 Text Decoration underline text-decoration-underline
44 Text Overflow truncate text-truncate
45 Table Layout table-fixed table-fixed
46 List Style list-disc list-unstyled
47 Align Self self-start align-self-start
48 Flex Wrap flex-wrap flex-wrap
49 Grid Template Columns grid-cols-3 row-cols-3
50 Content Alignment items-baseline align-items-baseline