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