Mengatasi Masalah Styling TinyMCE dengan Tailwind CSS v4 di Laravel

Pengantar

Saat membangun blog atau sistem manajemen konten dengan Laravel, kombinasi TinyMCE sebagai WYSIWYG editor dan Tailwind CSS untuk styling adalah pilihan yang sangat populer. Namun, banyak developer mengalami masalah yang sama: konten yang terlihat bagus di editor TinyMCE menjadi tidak ter-styling dengan baik saat ditampilkan ke publik.

Dalam artikel ini, saya akan menjelaskan mengapa masalah ini terjadi dan bagaimana cara mengatasinya, khususnya jika Anda menggunakan Tailwind CSS v4 dengan Laravel dan Vite.

Mengapa Masalah Ini Terjadi?

Tailwind CSS menggunakan sistem yang disebut Preflight, yaitu reset CSS yang menormalisasi tampilan elemen HTML di semua browser. Sayangnya, ini juga menghilangkan semua styling default dari elemen HTML seperti:

• <h1>, <h2>, <h3> - kehilangan ukuran font dan bold
• <p> - kehilangan margin dan line-height
• <ul>, <ol> - kehilangan bullet points dan numbering
• <strong>, <em> - kehilangan bold dan italic
• <a> - kehilangan warna dan underline

Akibatnya, konten yang dibuat dengan TinyMCE akan terlihat "flat" dan tidak memiliki hierarki visual yang jelas ketika ditampilkan di frontend.

Solusi: Tailwind Typography Plugin

Tailwind menyediakan plugin official bernama @tailwindcss/typography yang dirancang khusus untuk mengatasi masalah ini. Plugin ini menyediakan class utility prose yang secara otomatis memberikan styling yang indah dan profesional untuk konten HTML.

Implementasi untuk Tailwind CSS v4

Jika Anda menggunakan Tailwind CSS v4 (dengan @tailwindcss/vite plugin), berikut adalah langkah-langkah implementasinya:

1. Install Typography Plugin

Buka terminal di root project Laravel Anda dan jalankan:

npm install -D @tailwindcss/typography

2. Import Plugin di CSS

Edit file resources/css/app.css dan tambahkan import untuk plugin typography:

@import "tailwindcss";
@plugin "@tailwindcss/typography";

3. Rebuild Assets

Jalankan Vite untuk rebuild asset:

npm run dev

Untuk production:

npm run build

4. Terapkan Class Prose di Blade Template

Di view blade untuk menampilkan artikel (misalnya resources/views/posts/show.blade.php), wrap konten TinyMCE dengan class prose:

@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <h1 class="text-4xl font-bold mb-4">{{ $post->title }}</h1>
    
    <div class="text-gray-600 mb-6">
        <span>{{ $post->created_at->format('d M Y') }}</span>
        <span class="mx-2">•</span>
        <span>{{ $post->author->name }}</span>
    </div>
    
    <article class="prose prose-lg max-w-none">
        {!! $post->content !!}
    </article>
</div>
@endsection

Memahami Class Prose

Class prose memiliki beberapa variant yang bisa Anda gunakan:

Ukuran

• prose-sm - Untuk ukuran kecil
• prose (default) - Ukuran standar
• prose-lg - Ukuran besar
• prose-xl - Ukuran ekstra besar
• prose-2xl - Ukuran sangat besar

Lebar Maksimum

Secara default, prose memiliki max-width untuk meningkatkan keterbacaan. Gunakan max-w-none untuk menghilangkan batasan ini:

<article class="prose max-w-none">
    {!! $post->content !!}
</article>

Warna (Color Themes)

Typography plugin mendukung berbagai tema warna:

<!-- Gray (default) -->
<article class="prose prose-gray">

<!-- Slate -->
<article class="prose prose-slate">

<!-- Zinc -->
<article class="prose prose-zinc">

<!-- Blue -->
<article class="prose prose-blue">

Dark Mode

Untuk mendukung dark mode:

<article class="prose dark:prose-invert">
    {!! $post->content !!}
</article>

Kombinasi

Anda bisa mengombinasikan berbagai class untuk hasil yang optimal:

<article class="prose prose-lg prose-blue max-w-none dark:prose-invert">
    {!! $post->content !!}
</article>

Kustomisasi Typography (Opsional)

Jika Anda ingin menyesuaikan styling prose dengan branding website Anda, gunakan CSS variables di app.css:

@import "tailwindcss";
@plugin "@tailwindcss/typography";

.prose {
  --tw-prose-body: theme(colors.gray.800);
  --tw-prose-headings: theme(colors.gray.900);
  --tw-prose-links: theme(colors.blue.600);
  --tw-prose-bold: theme(colors.gray.900);
  --tw-prose-code: theme(colors.pink.600);
  --tw-prose-pre-bg: theme(colors.gray.900);
}

.dark .prose {
  --tw-prose-body: theme(colors.gray.300);
  --tw-prose-headings: theme(colors.white);
  --tw-prose-links: theme(colors.blue.400);
}

Sinkronisasi Editor dengan Frontend

Agar tampilan di TinyMCE editor sama dengan hasil di frontend, tambahkan konfigurasi berikut di JavaScript untuk TinyMCE:

tinymce.init({
    selector: 'textarea#content',
    plugins: 'lists link image code',
    toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist | link image | code',
    
    // Styling untuk editor agar mirip dengan frontend
    content_css: '/build/assets/app-*.css', // Path ke compiled CSS
    body_class: 'prose prose-lg max-w-none',
    content_style: `
        body { 
            padding: 1rem;
            max-width: none !important;
        }
    `
});

Troubleshooting

Masalah 1: Styling Tidak Muncul

Solusi:

• Pastikan npm run dev sedang berjalan
• Clear cache browser dengan Ctrl+F5
• Periksa console browser untuk error
• Pastikan @vite directive ada di layout

Masalah 2: Max Width Terlalu Sempit

Solusi: Tambahkan class max-w-none:

<article class="prose max-w-none">

Masalah 3: Warna Tidak Sesuai

Solusi: Gunakan variant warna atau customize dengan CSS variables seperti contoh di atas.

Perbedaan Tailwind CSS v3 vs v4

Jika Anda menggunakan Tailwind CSS v3, prosesnya sedikit berbeda:

Tailwind v3:

• Menggunakan file tailwind.config.js
• Plugin ditambahkan di plugins: [] array
• Tidak menggunakan @tailwindcss/vite

Tailwind v4:

• Tidak ada file tailwind.config.js
• Plugin di-import dengan @plugin di CSS
• Menggunakan @tailwindcss/vite
• Lebih cepat dan modern

Kesimpulan

Masalah styling konten TinyMCE dengan Tailwind CSS adalah hal yang umum terjadi, namun mudah diatasi dengan menggunakan plugin @tailwindcss/typography. Plugin ini memberikan styling yang profesional, responsif, dan mudah dikustomisasi.

Dengan mengikuti langkah-langkah di artikel ini, konten blog Anda akan terlihat indah dan mudah dibaca, baik di desktop maupun mobile.

Referensi

• Tailwind CSS Typography Documentation
• Tailwind CSS v4 Documentation
• TinyMCE Documentation
• Laravel Vite Documentation

Tentang Penulis: Artikel ini dibuat berdasarkan pengalaman nyata dalam mengembangkan blog dengan Laravel, Tailwind CSS v4, dan TinyMCE. Semoga bermanfaat untuk Anda yang mengalami masalah serupa!