Tailwind CSS Complete Notes (Full)
Tailwind CSS Complete Notes (Full Version)
1. Introduction
Tailwind CSS is a utility-first CSS framework for rapidly building custom designs directly in your markup.
2. Installation Methods
a) CDN (Quick Prototyping):
<script src="[Link]
b) Using PostCSS CLI:
- Install: npm install -D tailwindcss postcss autoprefixer
- Init: npx tailwindcss init
- Input file ([Link]):
@tailwind base;
@tailwind components;
@tailwind utilities;
- Build CSS:
npx tailwindcss -i ./[Link] -o ./[Link] --watch
3. Configuration ([Link])
[Link] = {
content: ["./*.html", "./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
primary: "#0d9488",
},
spacing: {
'72': '18rem',
'84': '21rem'
}
},
},
plugins: [],
4. Color System
Tailwind supports a full color palette:
- gray, red, yellow, green, blue, indigo, purple, pink, etc.
- Shades range from 50 to 900.
Special colors: black, white, transparent, current.
Examples:
- bg-blue-500, text-gray-700, border-red-300
5. Spacing (Margin, Padding, Width, Height)
- m-4, mt-2, mx-auto, p-6, px-4, py-2
- w-full, w-1/2, w-[300px]
- h-screen, min-h-full
6. Typography
- text-sm, text-lg, text-2xl, font-bold, font-light
- text-center, text-right
- leading-loose, tracking-wider
7. Backgrounds & Borders
- bg-red-500, bg-gradient-to-r, from-blue-400 to-green-400
- border, border-2, border-red-400, rounded, rounded-full
8. Flexbox & Grid
Flex Utilities:
- flex, flex-col, flex-row, justify-center, items-center, gap-4
Grid Utilities:
- grid, grid-cols-2, grid-cols-3, gap-4
9. Display, Position, Z-Index
- hidden, block, inline, inline-block
- relative, absolute, fixed, top-0, left-0
- z-0, z-10, z-50
10. Forms & Inputs
- input, select, textarea: px-4, py-2, border, rounded
- focus:outline-none, focus:ring-2, focus:ring-blue-500
11. Transitions & Animations
- transition, duration-300, ease-in-out
- animate-bounce, animate-ping
12. Custom Classes with @apply
.btn {
@apply px-4 py-2 bg-blue-500 text-white rounded;
13. Layers
@layer components {
.card {
@apply p-6 rounded shadow bg-white;
14. Responsive Design
- sm:, md:, lg:, xl:, 2xl:
- Example: md:text-xl lg:w-1/2
15. Dark Mode Support
Enable in config:
darkMode: 'class'
Usage: class="dark:bg-gray-800 dark:text-white"
16. Plugins
Official: forms, typography, aspect-ratio
Install:
npm install @tailwindcss/forms
Usage in config: plugins: [require('@tailwindcss/forms')]
17. Custom Fonts & Extend Theme
theme: {
extend: {
fontFamily: {
poppins: ['Poppins', 'sans-serif'],
18. CLI Build Command
npx tailwindcss -i ./[Link] -o ./[Link] --watch
19. Useful Tips
- Combine utilities for faster prototyping
- Use CDN for quick demos, PostCSS for projects
- Use @apply for reusable custom classes
20. Resources
- Official Site: [Link]
- Play CDN: [Link]
- GitHub: [Link]