Raw Tailwind Editor

A powerful Strapi 5 plugin that provides a visual editor for raw HTML with live Tailwind CSS preview. Perfect for creating custom HTML blocks with real-time visual feedback.

✨ Features

• Monaco Editor Integration: Professional code editing experience with syntax highlighting, auto-completion, and IntelliSense
• Live Tailwind CSS Preview: Real-time preview of your HTML with Tailwind CSS styling
• Split View Mode: Edit code and preview simultaneously with adjustable split ratio
• Visual Editing: Click-to-edit functionality directly in the preview pane
• Media Library Integration: Insert images and files from Strapi's media library
• Responsive Preview: Test your HTML at different viewport sizes (mobile, tablet, desktop, auto)
• Fullscreen Editor: Distraction-free editing in a fullscreen modal
• Inline Editor: Quick edits directly in the Content Manager
• Tailwind v4 Support: Configure custom theme using Tailwind CSS v4's @theme directive

📦 Installation

As a Local Plugin (Current Setup)

# Navigate to your Strapi project
cd your-strapi-project

# The plugin is already in src/plugins/raw-tailwind-editor
# Install dependencies
cd src/plugins/raw-tailwind-editor
yarn install

# Build the plugin
yarn build

As a Standalone Package

# Install from npm
npm install raw-tailwind-editor
# or
yarn add raw-tailwind-editor

🚀 Usage

1. Enable the Plugin

Add the plugin to your config/plugins.ts:

export default {
  "raw-tailwind-editor": {
    enabled: true,
  },
};

2. Add Custom Field to Content Type

In your Content-Type Builder:

1. Select a content type or create a new one
2. Click "Add another field"
3. Select "Custom" tab
4. Choose "Raw HTML with Tailwind"
5. Configure the field name and settings
6. Save

3. Configure Tailwind Theme (Optional)

Navigate to Settings → Raw Tailwind Editor to customize your Tailwind CSS v4 theme:

@theme {
  --color-primary: #1e40af;
  --color-secondary: #db2777;
  --font-sans: "Inter", sans-serif;
  --spacing-xl: 2rem;
}

4. Start Creating Content

1. Open the Content Manager
2. Create or edit an entry with the Raw HTML field
3. Use the inline Monaco editor for quick edits
4. Click "Open Fullscreen Editor" for advanced editing with live preview

🎨 Editor Features

Inline Editor

• Quick Access: Edit HTML directly in the Content Manager
• Syntax Highlighting: Full HTML syntax support
• Media Insert: Add images/files from media library
• Compact View: 300px height for efficient content management

Fullscreen Editor

• Split View: Code editor + live preview side-by-side
• Adjustable Split: Drag the divider to resize panes
• View Modes:
  • Code Only: Focus on writing HTML
  • Preview Only: See the final result
  • Split View: Best of both worlds
• Preview Sizes:
  • Auto: Responsive to available space
  • Mobile: 375px viewport
  • Tablet: 768px viewport
  • Desktop: 1200px viewport
• Visual Editing: Click elements in preview to edit them directly
• Floating Toolbar: Quick access to common HTML tags and formatting

🏗️ Architecture

Admin Components

admin/src/
├── components/
│   ├── RawHtmlInput.tsx          # Main custom field component
│   ├── EditorModal/
│   │   ├── index.tsx              # Fullscreen modal container
│   │   ├── CodeEditor.tsx         # Monaco editor wrapper
│   │   ├── PreviewPane.tsx        # Live preview container
│   │   ├── EditablePreview.tsx    # Visual editing functionality
│   │   ├── Toolbar.tsx            # View mode controls
│   │   ├── FloatingToolbar.tsx    # HTML tag insertion
│   │   ├── ResizeHandle.tsx       # Split view divider
│   │   ├── hooks.ts               # Custom React hooks
│   │   ├── types.ts               # TypeScript definitions
│   │   └── utils/                 # Helper functions
│   ├── Initializer.tsx            # Plugin initialization
│   └── PluginIcon.tsx             # Custom field icon
├── pages/
│   └── Settings/                  # Theme configuration page
├── translations/                  # i18n support
└── index.ts                       # Plugin registration

Server Components

server/
├── config/
│   └── index.js                   # Default theme configuration
├── controllers/
│   └── settings.js                # Settings API controller
├── routes/
│   └── index.js                   # API routes
├── services/
│   └── settings.js                # Settings service
└── index.js                       # Server registration

🔧 Development

Prerequisites

• Node.js 18+ or 20+
• Strapi 5.33.0+
• Yarn or npm

Setup Development Environment

# Clone the repository
git clone https://github.com/laofun/raw-tailwind-editor.git
cd raw-tailwind-editor

# Install dependencies
yarn install

Watch mode for development

yarn watch

Build for production

yarn build

Type checking

yarn test:ts:front

### Project Structure

raw-tailwind-editor/ ├── admin/ # Frontend code │ ├── src/ # Source files │ ├── tsconfig.json # TypeScript config │ └── custom.d.ts # Type declarations ├── server/ # Backend code ├── dist/ # Built files ├── package.json # Dependencies ├── .gitignore # Git ignore rules └── README.md # This file

## 📝 Configuration

### Plugin Configuration

In `config/plugins.ts`:

```typescript
export default {
  "raw-tailwind-editor": {
    enabled: true,
    resolve: "./src/plugins/raw-tailwind-editor",
    config: {
      themeConfig: `@theme {
        --color-primary: #3b82f6;
        --color-secondary: #8b5cf6;
      }`,
    },
  },
};

You need to update the config/middlewares.ts file. Replace strapi::security with

{
  name: 'strapi::security',
  config: {
    contentSecurityPolicy: {
      useDefaults: true,
      directives: {
        'script-src-elem': ["'self'", "'unsafe-inline'", 'cdn.tailwindcss.com'],
        upgradeInsecureRequests: null,
      },
    },
  },
},

Custom Field Options

When adding the field to a content type, you can configure:

• Field name: Unique identifier
• Field label: Display name
• Description: Help text
• Required: Make field mandatory

🎯 Use Cases

• Landing Pages: Create custom HTML sections with Tailwind styling
• Email Templates: Design responsive email layouts
• Custom Widgets: Build interactive components
• Marketing Blocks: Craft promotional content with precise control
• Documentation: Write technical docs with code examples

🔌 API Reference

Settings API

Get Configuration

GET /api/raw-tailwind-editor/settings

Response:

{
  "config": {
    "themeConfig": "@theme { --color-primary: #1e40af; }"
  }
}

Update Configuration

PUT /api/raw-tailwind-editor/settings
Content-Type: application/json

{
  "config": {
    "themeConfig": "@theme { --color-primary: #3b82f6; }"
  }
}

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow the existing code style
• Add TypeScript types for new features
• Test thoroughly before submitting
• Update documentation as needed

📄 License

MIT License - see LICENSE file for details

🙏 Acknowledgments

• Built for Strapi 5
• Powered by Monaco Editor
• Styled with Tailwind CSS v4
• UI components from Strapi Design System

---

Made with ❤️ for the Strapi community