shadcn logoGithub

shadcn-prose

A drop-in replacement for @tailwindcss/typography, designed for use with shadcn/ui. Includes headings, paragraphs, lists and more.

Installation

Simply install the package:

npm i shadcn-prose

Then update your globals.css:

@import 'shadcn-prose';

Usage

Add a prose class to your content and you're good to go:

<div className="prose">
  <h1>Hello world</h1>
  <p>This is a paragraph</p>
</div>

On the right is an example of the prose styles in action.

You can opt-out of the styles by adding the not-prose class:

<div className="prose">
  <h1>Hello world</h1>
  <div className="not-prose">
    <p>This is a paragraph</p>
  </div>
</div>

Styling the Web: A Modern CSS Journey

CSS has come a long way since its inception. From simple layout tweaks to complex responsive designs, it's become an essential tool for crafting delightful web experiences. In this article, we’ll explore various HTML elements commonly styled with modern CSS utility systems like tailwindcssand component libraries.

Introduction

Web design today is more accessible than ever. Thanks to utility-first frameworks and component-based architectures, developers can build beautiful UIs with less effort.

Key Benefits of Utility CSS

  • Faster development
  • Consistent design system
  • Better collaboration between dev and design

What You Need

  1. Basic HTML/CSS knowledge
  2. Code editor (e.g., VS Code)
  3. Modern browser for testing

Checklist

  • Install Tailwind CSS

  • Configure PostCSS

  • Create base components

Sample Image

Here's a sample image to test image styling. Make sure it scales well on all screen sizes.

Cute kitten

Code Example

/* Tailwind example */
.button {
  @apply px-4 py-2 bg-blue-600 text-white rounded;
}

Blockquote

"Design is not just what it looks like and feels like. Design is how it works." — Steve Jobs

Table Example

FrameworkTypeStars
Tailwind CSSUtility-First70k+
BootstrapComponent-Based160k+
BulmaUtility/Component Hybrid45k+

Inline Elements

You can bold text, italicize it, underline it, or even add links. Here’s some inline code too.

Definition List

CSS
Cascading Style Sheets
HTML
HyperText Markup Language
JS
JavaScript

Details and Summary

Click to expand additional info

Utility CSS simplifies the process of managing and scaling CSS in large projects.

Inline Elements

You can bold text, italicize it, underline it, or even add links. Here’s some inline code too. Highlight important info and small text size. HTML is the foundation of the web.

Superscript & Subscript

E = mc2 is Einstein's mass-energy equivalence. Water is H2O.

Conclusion

Whether you're using Tailwind, vanilla CSS, or any other system, a solid understanding of how HTML elements behave is key to great styling. Test extensively to ensure consistent, accessible results across devices.