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
• Colors: bg-white, text-gray-900, border-blue-500
• Layout: flex, grid, items-center
• Responsive: sm:px-6, lg:grid-cols-3

2. Responsive Design

Tailwind uses mobile-first breakpoints:

<div className="text-sm md:text-base lg:text-lg">  Responsive text size</div>

Breakpoints:

• sm: 640px and up
• md: 768px and up
• lg: 1024px and up
• xl: 1280px and up
• 2xl: 1536px and up

3. Dark Mode

Propify components support dark mode:

<div className="bg-white dark:bg-gray-900">  <h2 className="text-gray-900 dark:text-white">    Dark mode ready  </h2></div>

Common Patterns in Propify

Container and Spacing

<div className="container mx-auto px-4 sm:px-6 lg:px-8">  <div className="mx-auto max-w-7xl">    {/* Content */}  </div></div>

Flexbox Layouts

<div className="flex flex-col items-center justify-center">  <div className="flex gap-4">    {/* Flex items */}  </div></div>

Grid Systems

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">  {/* Grid items */}</div>

Customizing Propify Components

You can customize component styles in several ways:

1. Additional Classes

<Pricing05  className="my-custom-spacing"  // Adds to the root element/>

2. Tailwind Modifiers

<Pricing05  className="[&_.bg-accent]:bg-blue-50 [&_.text-primary]:text-blue-600"  // Targets specific child elements/>

3. CSS Variables

Many components use CSS variables you can override:

:root {  --primary: 220 90% 56%;  --primary-foreground: 0 0% 100%;}

Resources

• Tailwind CSS Documentation
• Tailwind Play - Experiment in browser
• Tailwind CSS IntelliSense - VS Code extension
• Heroicons - Icons that pair well with Tailwind

Tips for Working with Propify

1. Use the Tailwind config - Extend your theme for consistency
2. Leverage utilities - Don't write custom CSS unless necessary
3. Think mobile-first - Start with mobile styles, add breakpoints
4. Use the JIT compiler - Get any value on demand like w-[137px]
5. Install browser extensions - Tailwind CSS Debug Screens helps visualize breakpoints

Understanding Tailwind will help you customize Propify components effectively while maintaining consistency across your application.