Tailwind CSS Basics
Understanding Tailwind in Propify Components
Tailwind CSS is the styling foundation for all Propify components. Here's what you need to know to work effectively with our components.
What is Tailwind CSS?
Tailwind is a utility-first CSS framework that provides low-level utility classes to build custom designs directly in your markup.
Instead of writing CSS like this:
You write HTML/JSX/TSX like this:
<!-- html --><button class="px-4 py-2 bg-blue-500 text-white rounded"> Click me</button><!-- jsx/type --><button className="px-4 py-2 bg-blue-500 text-white rounded"> Click me</button>Key Concepts for Propify Components
1. Utility Classes
Our components use Tailwind utilities for:
- Spacing:
p-4,mx-auto,mt-8 - Typography:
text-xl,font-bold,tracking-tight