Tailwind CSS Cheat sheet! Master Tailwind CSS in Minutes
Tailwind CSS Cheat sheet! Master Tailwind CSS in Minutes #devtools99 #tailwindcss
Tailwind CSS Cheatsheet
1. Basic text and Font styling: To style text on your website, use 'text-lg' for a larger font size, 'font-bold' to make the text bold, and 'text-gray-800' for a dark gray color. These classes help you easily adjust the appearance of your text.
2. Flex Utilities: Use 'flex' to create a flexible container, 'justify-center' for horizontal centering, and 'items-center' for vertical centering. This setup ensures your content is centered in both directions.
3. Grid Layout Utilities: Using 'grid' creates a grid layout, 'grid-cols-2' divides the space into two columns, and 'gap-4' adds spacing between the grid items. This layout organizes content neatly and symmetrically.
4. Spacing Utitilies ~ Margin & Padding: The 'm-4' class adds a margin around the element, and 'p-6' applies padding inside it, providing a straightforward way to manage spacing.
5. Background & Border Styling: The 'bg-blue-500' class gives an element a blue background, 'border-gray-300' sets the border color to gray, and 'rounded-lg' makes the corners rounded. This combination enhances the visual appeal of the element.
6. Responsinve Design: The classes 'text-xs', 'text-sm', 'text-md', and 'text-lg' adjust the font size for different screen sizes, ensuring text remains readable on any device. This responsive design feature keeps your content accessible and visually appealing.
7. Hover, Focus, and Active States: The classes 'hover:bg-gray-700', 'focus:bg-gray-600', and 'active:bg-gray-500' change the button color when interacted with—hovering, focusing, or clicking—shifting to darker shades of gray to indicate the interaction state.
8. Positioning Utilities: The 'relative' class sets up a containing context, allowing the 'absolute' class to position an inner div precisely. With 'top-0' and 'right-0', the div is placed 0 pixels away from the top and right edges, anchoring it securely in the corner.
9. Shadow & Opacity: The 'shadow-lg' class adds a large shadow for depth, while 'opacity-75' makes the element 75% visible, giving it a partially transparent look. This combination enhances the visual styling of the element.
10. Dark Mode: The 'dark:bg-black' and 'dark:text-white' classes change the background to black and the text to white when dark mode is enabled, ensuring good readability and a consistent look across themes.
DevTools99 is dedicated to assisting developers by providing valuable tips and tricks for development. Join us for insightful tutorials and tool recommendations by liking, sharing, and subscribing to DevTools99 on YouTube.
Stay connected with us on social media:
Facebook: / devtools99
Instagram: / devtools99
Twitter: / devtools99
Pinterest: / devtools99
@WebDevSimplified @TailwindLabs @programmingwithmosh @freecodecamp @CodeWithHarry @BroCodez
#javascript #html #website #devtools99 #developmenttips #developmenttricks