Frutjam Blog | CSS-Only Tailwind CSS Guides

Guides and tutorials on CSS-only Tailwind CSS components, accessible UI patterns, WCAG compliance, and framework-agnostic frontend development with Django, HTMX, Laravel, and more.

Screen-print illustration of a dusty abandoned panel beside a working one, a single cable being unplugged from the first and seated into the second

SimpleMDE Alternative: The Diff Is Smaller Than You Think

SimpleMDE has not shipped a commit since June 2024 and has 200+ open issues. Here is how to move to markdown-text-editor, including the option and toolbar mapping, and an honest list of what you lose.

Screen-print illustration of an input panel with a toolbar along its top, bolted firmly to a base, beside a tipped-over grey panel whose cable has been cut

Every JavaScript Markdown Editor Breaks Your Form. Here's One That Doesn't

Most JavaScript markdown editors hide your textarea and edit a copy, which quietly breaks required fields, validation and anything reading the form. Here is one that enhances the textarea instead, so the form keeps working.

Isometric illustration of a floating island city with a glowing central tower, linked by bridges to several surrounding platforms, against a galaxy background

Tailwind CSS Alternatives: Which One Fits the Problem You Actually Have

A practical guide to Tailwind CSS alternatives, from UnoCSS and Panda to Open Props, Pico and plain CSS. Most people don't need to leave Tailwind, they need to fix one specific thing about it.

Illustration of a torn sheet of scribbled notes passing through an archway and emerging as a clean typeset page

Adding a Markdown Editor to Laravel Forms (No Sync Code Required)

Most Laravel markdown editors replace the textarea, so you have to sync the value back before submit. Here is how to add one that enhances the textarea instead: $request->input() just works.

Illustration of two panels tethered to a block, one having swung across a dotted arc to the opposite side

Dropdowns That Position Themselves: CSS Anchor Positioning Is Baseline Now

Popper.js and Floating UI existed to answer one question: where should this panel go? CSS answers it now, in every major browser, with no measuring and no listeners.

Illustration of a text box with an editor toolbar and a pencil writing in it, beside a green check mark

Adding a Markdown Editor to Django Forms (No Sync Code Required)

Most Django markdown editors hide the textarea and edit a copy, which breaks required fields and anything that reads the form early. Here is how to add one that leaves the textarea in place, so request.POST just works.

Bauhaus-style poster of a large green ring built from interlocking blocks with nothing holding them

Zero JavaScript UI: Build Faster, More Accessible Web Apps With CSS-Only Components

The native web platform now handles modals, accordions, drawers, and popovers without JavaScript. Here is how CSS-only Tailwind CSS components from Frutjam make this practical.

Retro poster illustration of capsules travelling through pneumatic tubes into a wall of pigeonholes

Tailwind CSS + HTMX: The Component Library That Does Not Fight Your Stack

Why most Tailwind CSS component libraries break with HTMX, and how Frutjam's CSS-only components work seamlessly with HTMX, Django, and Laravel without re-initialization.

Clay-style still life of a jar of fruit jam with raspberries beside a plain daisy flower

The Best DaisyUI Alternative: CSS-Only Tailwind Components Without JavaScript

Why developers are switching from DaisyUI to Frutjam, a CSS-only Tailwind CSS component library that passes WCAG AA by default and requires zero JavaScript.

Illustration of a browser window as a hot-air balloon rising while heavy sandbags fall away

Why I Stopped Using JavaScript-Heavy UI Libraries (And Built a CSS-First Tailwind Component Library)

Achieve 100% PageSpeed scores by default. A guide to building high-performance, RTL-ready platforms using native HTML5 and CSS-first components.