Tailwind CSS Cheat Sheet for Ghost CMS Blog Posts

Introduction

This cheat sheet provides a quick reference for commonly used Tailwind CSS classes when styling blog posts in Ghost CMS. Tailwind CSS is a utility-first CSS framework that allows for rapid custom designs. When combined with Ghost's powerful content management system, it enables creators to build beautifully styled blog posts efficiently.

Remember to include Tailwind CSS in your Ghost theme for these classes to take effect. You can use these classes directly in your theme's templates or via Ghost's content API for inline styling.

Typography

Font size: text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl
Font weight: font-normal, font-medium, font-semibold, font-bold
Text color: text-gray-700, text-blue-600, text-red-500
Line height: leading-normal, leading-relaxed, leading-loose
Text alignment: text-left, text-center, text-right
Text decoration: underline, line-through

Spacing

Margin: m-2, mt-4, mb-6, mx-auto
Padding: p-4, pt-2, pb-8, px-4

Layout

Display: block, inline, inline-block, flex
Flex: flex-row, flex-col, items-center, justify-between
Width: w-full, w-1/2, w-64
Max-width: max-w-sm, max-w-md, max-w-lg, max-w-xl

Borders

Border: border, border-2, border-t, border-b
Border color: border-gray-300, border-blue-500
Border radius: rounded, rounded-lg, rounded-full

Backgrounds

Background color: bg-white, bg-gray-100, bg-blue-500
Opacity: opacity-75, opacity-50

Images

Object fit: object-cover, object-contain
Object position: object-center, object-top

Responsive Design

Breakpoints: sm:, md:, lg:, xl: (e.g., md:text-lg)

Ghost-specific classes

kg-width-wide: For wider content
kg-width-full: For full-width content
kg-gallery-container: For image galleries
kg-bookmark-card: For link previews

Tailwind CSS cheat sheet (mini)