Tailwind CSS Documentation
Welcome to the official documentation for Tailwind CSS, the utility-first CSS framework for rapidly building custom user interfaces.
Getting Started
To get started with Tailwind CSS, include the latest build from CDN, or install it via Node.js/NPM for local development.
@import url('https://cdn.tailwindcss.com');Then, start using utility classes directly in your HTML to style elements without writing any custom CSS.
Available Utilities
Tailwind CSS provides thousands of classes for layout, typography, spacing, color, borders, shadows, and more. Here are some examples:
text-center- Centers text horizontally.bg-red-400- Applies a red background.rounded-lg- Rounds element corners.flex- Uses flexbox layout.hover:bg-gray-200- Changes background on hover.
You can explore all classes and their usage in the utility list.
Customizing Your Theme
Tailwind allows easy customization through the tailwind.config.js file. You can change colors, fonts, spacing, and more to tailor styles to your brand.
module.exports = {
theme: {
extend: {
colors: {
primary: '#4f46e5',
},
},
},
};Responsive Design
Every utility class can be applied conditionally at designated breakpoints (sm, md, lg, etc.). For example:
<div class="md:col-span-1 sm:col-span-1">>Flexbox on desktop</div>This ensures your layouts adapt across different screen sizes and resolutions effortlessly.
Contributing & Community
Tailwind CSS is actively maintained by the community and is open source. We love feedback and pull requests from developers of all experience levels.