# Tailwind Studio v3.0.0 - Complete Documentation

## 🎉 Welcome to Tailwind Studio v3.0.0

**A complete conversion from Bootstrap Studio to Tailwind CSS framework**

**Version:** 3.0.0  
**Release Date:** January 22, 2026  
**Framework:** Tailwind CSS  
**Previous:** Bootstrap Studio v6.2.0

---

## 🚀 What's New

### **Complete Framework Conversion**

**Tailwind Studio** is a comprehensive rebuild of Bootstrap Studio using Tailwind CSS, maintaining 100% of the features while switching to the utility-first framework.

**Key Changes:**
- ✅ Tailwind CSS instead of Bootstrap
- ✅ All components converted to Tailwind
- ✅ Utility-first class approach
- ✅ No Bootstrap JavaScript dependencies
- ✅ Pure CSS + vanilla JavaScript
- ✅ Smaller bundle size
- ✅ More flexible styling
- ✅ All v6.2.0 features maintained

---

## 📋 All Features Maintained

### **From Bootstrap Studio v6.2.0:**

✅ **Page Information System**
- Company/Site Name
- Address, Phone, Email, Fax
- Main & Secondary Logos
- Primary & Secondary Colors
- Auto-update with data attributes

✅ **Custom Components**
- Save/Load custom components
- Component library
- Import/Export
- Thumbnails and categories

✅ **Editor Features**
- Code editor with syntax highlighting
- Inspector panel
- Component hierarchy
- Drag & drop
- Mobile responsive
- Preview mode

✅ **Advanced Features**
- Data-editable attributes
- Auto-type detection
- Save/Load projects
- Export HTML
- Custom CSS/JS
- External libraries

---

## 🎨 Tailwind CSS Framework

### **What is Tailwind CSS?**

Tailwind is a utility-first CSS framework that provides low-level utility classes to build designs directly in your markup.

**Advantages:**
- **Utility-first:** No need to write custom CSS
- **Responsive:** Built-in responsive design
- **Customizable:** Easy to customize
- **Small:** Only includes what you use
- **Fast:** No CSS bloat

### **CDN Included:**

```html
<script src="https://cdn.tailwindcss.com"></script>
```

**Note:** This is the Tailwind Play CDN, perfect for development. For production, use the Tailwind CLI for optimization.

---

## 🔄 Bootstrap to Tailwind Conversion Guide

### **Grid System:**

| Bootstrap | Tailwind |
|-----------|----------|
| `container` | `container mx-auto px-4` |
| `container-fluid` | `w-full px-4` |
| `row` | `flex flex-wrap -mx-2` |
| `col` | `px-2` |
| `col-12` | `w-full px-2` |
| `col-md-6` | `w-full md:w-1/2 px-2` |
| `col-md-4` | `w-full md:w-1/3 px-2` |
| `col-md-3` | `w-full md:w-1/4 px-2` |

### **Buttons:**

| Bootstrap | Tailwind |
|-----------|----------|
| `btn btn-primary` | `px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700` |
| `btn btn-secondary` | `px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700` |
| `btn btn-success` | `px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700` |
| `btn btn-danger` | `px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700` |
| `btn btn-lg` | `px-6 py-3 text-lg bg-blue-600 text-white rounded-lg` |

### **Cards:**

| Bootstrap | Tailwind |
|-----------|----------|
| `card` | `bg-white rounded-lg shadow-md overflow-hidden` |
| `card-body` | `p-6` |
| `card-title` | `text-xl font-bold mb-2` |
| `card-text` | `text-gray-700` |

### **Alerts:**

| Bootstrap | Tailwind |
|-----------|----------|
| `alert alert-primary` | `p-4 bg-blue-100 border-l-4 border-blue-500 text-blue-700` |
| `alert alert-success` | `p-4 bg-green-100 border-l-4 border-green-500 text-green-700` |
| `alert alert-warning` | `p-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700` |
| `alert alert-danger` | `p-4 bg-red-100 border-l-4 border-red-500 text-red-700` |

### **Navbar:**

**Bootstrap:**
```html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
    </ul>
  </div>
</nav>
```

**Tailwind:**
```html
<nav class="bg-white shadow-md">
  <div class="max-w-7xl mx-auto px-4">
    <div class="flex justify-between items-center h-16">
      <a class="text-xl font-bold text-gray-800" href="#">Brand</a>
      <ul class="hidden md:flex space-x-8">
        <li><a class="text-gray-600 hover:text-gray-900" href="#">Home</a></li>
      </ul>
    </div>
  </div>
</nav>
```

### **Forms:**

| Bootstrap | Tailwind |
|-----------|----------|
| `form-control` | `w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500` |
| `form-label` | `block text-sm font-medium text-gray-700 mb-1` |

### **Utilities:**

| Bootstrap | Tailwind |
|-----------|----------|
| `text-center` | `text-center` |
| `text-primary` | `text-blue-600` |
| `text-muted` | `text-gray-500` |
| `bg-light` | `bg-gray-100` |
| `bg-dark` | `bg-gray-900` |
| `mb-4` | `mb-4` |
| `mt-3` | `mt-3` |
| `p-5` | `p-5` |

---

## 🧩 Component Templates

### **Layout Components:**

**Section:**
```html
<section class="py-10"></section>
```

**Container:**
```html
<div class="container mx-auto px-4"></div>
```

**Grid Row:**
```html
<div class="flex flex-wrap -mx-2"></div>
```

**Column:**
```html
<div class="px-2"></div>
```

**2 Column Layout:**
```html
<div class="flex flex-wrap -mx-2">
  <div class="w-full md:w-1/2 px-2"></div>
  <div class="w-full md:w-1/2 px-2"></div>
</div>
```

**3 Column Layout:**
```html
<div class="flex flex-wrap -mx-2">
  <div class="w-full md:w-1/3 px-2"></div>
  <div class="w-full md:w-1/3 px-2"></div>
  <div class="w-full md:w-1/3 px-2"></div>
</div>
```

### **Typography Components:**

**Headings:**
```html
<h1 class="text-5xl font-bold">Heading 1</h1>
<h2 class="text-4xl font-bold">Heading 2</h2>
<h3 class="text-3xl font-bold">Heading 3</h3>
<h4 class="text-2xl font-bold">Heading 4</h4>
<h5 class="text-xl font-bold">Heading 5</h5>
<h6 class="text-lg font-bold">Heading 6</h6>
```

**Paragraph:**
```html
<p class="text-base text-gray-700">Lorem ipsum dolor sit amet.</p>
```

**Blockquote:**
```html
<blockquote class="text-xl italic border-l-4 border-gray-300 pl-4 text-gray-700">
  "This is a blockquote element."
</blockquote>
```

### **UI Components:**

**Button:**
```html
<button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
  Button
</button>
```

**Card:**
```html
<div class="bg-white rounded-lg shadow-md overflow-hidden">
  <div class="p-6">
    <h5 class="text-xl font-bold mb-2">Card Title</h5>
    <p class="text-gray-700">Card content text.</p>
    <a href="#" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
      Go somewhere
    </a>
  </div>
</div>
```

**Alert:**
```html
<div class="p-4 bg-blue-100 border-l-4 border-blue-500 text-blue-700">
  This is an alert!
</div>
```

**Navbar (Responsive):**
```html
<nav class="bg-white shadow-md">
  <div class="max-w-7xl mx-auto px-4">
    <div class="flex justify-between items-center h-16">
      <a class="text-xl font-bold text-gray-800" href="#">Brand</a>
      <button class="md:hidden" onclick="this.nextElementSibling.classList.toggle('hidden')">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
      <ul class="hidden md:flex space-x-8">
        <li><a class="text-gray-600 hover:text-gray-900" href="#">Home</a></li>
        <li><a class="text-gray-600 hover:text-gray-900" href="#">About</a></li>
        <li><a class="text-gray-600 hover:text-gray-900" href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>
```

### **Media Components:**

**Image (Responsive):**
```html
<img src="image.jpg" class="w-full h-auto" alt="Description">
```

**Video (16:9 Aspect Ratio):**
```html
<div class="relative pb-[56.25%] h-0 overflow-hidden">
  <iframe class="absolute top-0 left-0 w-full h-full" src="video-url" allowfullscreen></iframe>
</div>
```

**Carousel/Slider:**
```html
<div class="relative overflow-hidden rounded-lg">
  <div class="relative h-96">
    <img src="slide.jpg" class="w-full h-full object-cover" alt="Slide">
    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
      <h5 class="text-white text-2xl font-bold">Slide Title</h5>
      <p class="text-white/90">Slide description.</p>
    </div>
  </div>
  <button class="absolute top-1/2 left-4 -translate-y-1/2 bg-white/80 hover:bg-white p-2 rounded-full shadow-lg">←</button>
  <button class="absolute top-1/2 right-4 -translate-y-1/2 bg-white/80 hover:bg-white p-2 rounded-full shadow-lg">→</button>
</div>
```

**Hero Section:**
```html
<div class="p-12 mb-4 bg-gray-100 rounded-xl">
  <div class="w-full py-12">
    <h1 class="text-5xl font-bold mb-4">Custom Hero Section</h1>
    <p class="text-xl text-gray-700 max-w-2xl">Beautiful Tailwind styling.</p>
    <button class="mt-6 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-lg">
      Learn more
    </button>
  </div>
</div>
```

---

## 📐 Tailwind Utilities Reference

### **Spacing:**

```
p-4      = padding: 1rem
px-4     = padding-left: 1rem; padding-right: 1rem
py-2     = padding-top: 0.5rem; padding-bottom: 0.5rem
m-4      = margin: 1rem
mx-auto  = margin-left: auto; margin-right: auto
```

### **Sizing:**

```
w-full   = width: 100%
w-1/2    = width: 50%
w-1/3    = width: 33.333%
w-1/4    = width: 25%
h-16     = height: 4rem
h-auto   = height: auto
```

### **Colors:**

```
bg-blue-600    = background-color: #2563eb
text-white     = color: white
text-gray-700  = color: #374151
border-gray-300 = border-color: #d1d5db
```

### **Typography:**

```
text-xl    = font-size: 1.25rem
text-2xl   = font-size: 1.5rem
text-5xl   = font-size: 3rem
font-bold  = font-weight: 700
italic     = font-style: italic
```

### **Layout:**

```
flex           = display: flex
flex-wrap      = flex-wrap: wrap
justify-between = justify-content: space-between
items-center   = align-items: center
space-x-4      = gap between children (horizontal)
space-y-2      = gap between children (vertical)
```

### **Responsive:**

```
md:w-1/2    = width: 50% on medium screens and up
lg:text-xl  = font-size: 1.25rem on large screens and up
hidden md:flex = hidden on mobile, flex on medium+
```

### **Effects:**

```
rounded      = border-radius: 0.25rem
rounded-lg   = border-radius: 0.5rem
rounded-full = border-radius: 9999px
shadow-md    = box-shadow: medium
hover:bg-blue-700 = background on hover
```

---

## 🎯 Page Information System

### **Fully Compatible with Tailwind**

All Page Information features work identically in Tailwind Studio:

**Data Attributes:**
```html
<!-- Company Name -->
<h1 data-page-name>Company Name</h1>

<!-- Contact Info -->
<p data-page-phone>Phone</p>
<a data-page-email href="mailto:">Email</a>
<p data-page-address>Address</p>

<!-- Logos -->
<img data-page-logo class="h-12 w-auto" src="">
<img data-page-logo-secondary class="h-8 w-auto" src="">

<!-- Colors -->
<h2 data-page-primary-color data-page-primary-color-type="color">
  Text in primary color
</h2>

<div data-page-primary-color data-page-primary-color-type="bg" class="p-4">
  Background in primary color
</div>

<div data-page-secondary-color data-page-secondary-color-type="border" class="border-2">
  Border in secondary color
</div>
```

**Usage:**
1. Go to Page Settings → Page Information
2. Fill in your company details
3. Upload logos
4. Choose brand colors
5. All components with data attributes update automatically!

---

## 🚀 Getting Started

### **Quick Start:**

1. **Open Tailwind Studio** in your browser
2. **Add Components:** Drag from Components panel
3. **Customize:** Edit in Inspector or Code Editor
4. **Style:** Use Tailwind classes
5. **Save:** Export or save project

### **Creating Your First Page:**

```
1. Add Container component
2. Add 2-Column Layout inside
3. Add Heading in left column
4. Add Paragraph in right column
5. Add Button below
6. Customize colors with Tailwind classes
7. Export HTML!
```

### **Example Page Structure:**

```html
<div class="container mx-auto px-4 py-12">
  <div class="flex flex-wrap -mx-2">
    <div class="w-full md:w-1/2 px-2">
      <h1 class="text-4xl font-bold mb-4">Welcome</h1>
      <p class="text-gray-700 mb-6">Beautiful page built with Tailwind Studio.</p>
      <button class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
        Get Started
      </button>
    </div>
    <div class="w-full md:w-1/2 px-2">
      <img src="hero.jpg" class="w-full h-auto rounded-lg shadow-lg">
    </div>
  </div>
</div>
```

---

## 💡 Tips & Best Practices

### **Tailwind Best Practices:**

✅ **Use Utility Classes**
```html
<!-- Good -->
<div class="bg-blue-600 text-white p-4 rounded">

<!-- Avoid -->
<div class="custom-blue-box">
```

✅ **Responsive Design**
```html
<!-- Mobile first -->
<div class="w-full md:w-1/2 lg:w-1/3">
```

✅ **Hover States**
```html
<button class="bg-blue-600 hover:bg-blue-700">
```

✅ **Combine Classes**
```html
<div class="flex items-center justify-between p-4 bg-white shadow rounded">
```

### **Component Organization:**

✅ Group related components
✅ Use containers for layout
✅ Add sections for major parts
✅ Name components descriptively

### **Color Scheme:**

✅ Use consistent color palette
✅ Leverage Page Information for brand colors
✅ Use Tailwind color scale (100-900)
✅ Add hover states for interactive elements

---

## 🔧 Advanced Features

### **Custom CSS:**

Add custom Tailwind directives in Page Settings → Custom CSS:

```css
@layer components {
  .btn-custom {
    @apply px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700;
  }
}
```

### **Custom JavaScript:**

Add interactivity in Page Settings → Custom JavaScript:

```javascript
// Mobile menu toggle
document.querySelector('[data-menu-toggle]').addEventListener('click', function() {
  document.querySelector('[data-menu]').classList.toggle('hidden');
});
```

### **Data-Editable:**

Make any element editable:

```html
<h1 data-editable="true">Editable Heading</h1>
<p data-editable="true">Editable paragraph text.</p>
```

Then edit via Inspector!

---

## 📦 Export & Production

### **Export HTML:**

1. Click Menu → Export → HTML
2. Get complete, self-contained HTML file
3. Includes Tailwind CDN for development

### **For Production:**

Replace CDN with Tailwind CLI for optimization:

```bash
# Install Tailwind
npm install -D tailwindcss

# Generate config
npx tailwindcss init

# Build CSS
npx tailwindcss -o output.css --minify
```

### **Deployment:**

Upload exported HTML to:
- GitHub Pages
- Netlify
- Vercel
- Your web server

---

## ✅ Migration from Bootstrap Studio

### **If You Have Bootstrap Studio Projects:**

All features work identically:
✅ Page Information
✅ Custom Components  
✅ Save/Load
✅ Data-editable
✅ Inspector
✅ Code Editor

**Only Change:** Use Tailwind classes instead of Bootstrap classes

**Conversion Tool:** Use the reference tables above to convert classes

---

## 📚 Resources

### **Tailwind Documentation:**
- Official Docs: https://tailwindcss.com/docs
- Components: https://tailwindui.com/components
- Play CDN: https://tailwindcss.com/docs/installation/play-cdn

### **Color Reference:**
- gray: #374151, #6b7280, #9ca3af
- blue: #3b82f6, #2563eb, #1d4ed8
- green: #10b981, #059669
- red: #ef4444, #dc2626
- yellow: #f59e0b, #d97706

### **Tailwind Studio Help:**
- Use Page Settings for global configuration
- Use Inspector to edit component properties
- Use Code Editor for custom HTML
- Use Data Attributes for dynamic content

---

## 🎉 Summary

**Tailwind Studio v3.0.0** brings the power of Tailwind CSS to a visual, no-code builder environment!

**Key Benefits:**
✅ Utility-first CSS framework
✅ Smaller, faster sites
✅ More flexible styling
✅ No Bootstrap dependencies
✅ All features from v6.2.0 maintained
✅ Modern, clean components
✅ Full responsive support
✅ Production-ready output

**Get Started:** Open Tailwind Studio and start building beautiful, responsive websites with Tailwind CSS!

---

**Tailwind Studio v3.0.0** - Build Faster with Tailwind CSS! 🚀