Tailwind CSS Cheat Sheet
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build designs directly in your markup. It’s customizable and helps streamline the development process by offering a set of pre-defined classes for common styling tasks.
Installation
Install via npm:
npm install tailwindcss
Create Tailwind CSS configuration file:
npx tailwindcss init
Include Tailwind CSS in your project:
<!-- In your CSS file -->
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
Basic Usage
Applying Classes:
<div class="text-center bg-blue-500 text-white p-4">Hello, Tailwind!</div>
Typography
Text Alignment:
.text-left
.text-center
.text-right
.text-justify
Font Weight:
.font-thin
.font-normal
.font-semibold
.font-bold
.font-extrabold
Text Color:
.text-gray-500
.text-red-600
.text-blue-700
Layout
Container:
.container
.mx-auto
(centered)
Width and Height:
.w-1/2
.h-64
.min-w-full
Padding and Margin:
.p-4
.m-2
Flexbox:
.flex
.flex-row
.justify-between
.items-center
Backgrounds
Background Color:
.bg-gray-200
.bg-indigo-700
.bg-gradient-to-r
Background Image:
.bg-cover
.bg-center
Borders
Border Styles:
.border
.border-t
.border-l
.rounded
Border Color:
.border-gray-400
.border-red-500
Hover and Focus States
Hover Effect:
.hover:bg-gray-300
.hover:text-blue-600
Focus Effect:
.focus:outline-none
.focus:border-blue-500
Responsive Design
Responsive Classes:
.sm:
(small screens).md:
(medium screens).lg:
(large screens).xl:
(extra-large screens)
Responsive Visibility:
.hidden
.sm:block
.lg:inline
Animations
Transition Duration:
.transition
.ease-in
.duration-300
Customization
Extend Tailwind CSS:
// In tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'cyan': '#00FFFF',
},
},
},
variants: {},
plugins: [],
}
So here our Tailwind CSS cheat sheet covers essential classes for various styling needs. For a comprehensive list and in-depth documentation, refer to the official Tailwind CSS documentation. Happy coding with Tailwind CSS!