+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Vivamus sodales, nulla sit amet porttitor rhoncus, lacus ex
+ vestibulum libero, ac mollis neque ante id justo. Nam tempor
+ euismod nisi ac ornare. Pellentesque id sapien lacinia,
+ venenatis est aliquam, dignissim elit. Suspendisse potenti.
+ Cras ut ante in libero tempus sodales sed quis dolor.
+
+
+
+
+
+
+ Text
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Vivamus sodales, nulla sit amet porttitor rhoncus, lacus ex
+ vestibulum libero, ac mollis neque ante id justo. Nam tempor
+ euismod nisi ac ornare. Pellentesque id sapien lacinia,
+ venenatis est aliquam, dignissim elit. Suspendisse potenti.
+ Cras ut ante in libero tempus sodales sed quis dolor.
+
+
+
+
+
+ Elevated
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Vivamus sodales, nulla sit amet porttitor rhoncus, lacus ex
+ vestibulum libero, ac mollis neque ante id justo. Nam tempor
+ euismod nisi ac ornare. Pellentesque id sapien lacinia,
+ venenatis est aliquam, dignissim elit. Suspendisse potenti.
+ Cras ut ante in libero tempus sodales sed quis dolor.
+
+
+
+
+
+ Outlined
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Vivamus sodales, nulla sit amet porttitor rhoncus, lacus ex
+ vestibulum libero, ac mollis neque ante id justo. Nam tempor
+ euismod nisi ac ornare. Pellentesque id sapien lacinia,
+ venenatis est aliquam, dignissim elit. Suspendisse potenti.
+ Cras ut ante in libero tempus sodales sed quis dolor.
+
+
+
+
+ Tonal
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Vivamus sodales, nulla sit amet porttitor rhoncus, lacus ex
+ vestibulum libero, ac mollis neque ante id justo. Nam tempor
+ euismod nisi ac ornare. Pellentesque id sapien lacinia,
+ venenatis est aliquam, dignissim elit. Suspendisse potenti.
+ Cras ut ante in libero tempus sodales sed quis dolor.
+
+
+
+
+
+
+
+
+ Accordion title
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Vivamus sodales, nulla sit amet porttitor rhoncus, lacus
+ ex vestibulum libero, ac mollis neque ante id justo. Nam
+ tempor euismod nisi ac ornare. Pellentesque id sapien
+ lacinia, venenatis est aliquam, dignissim elit.
+ Suspendisse potenti. Cras ut ante in libero tempus sodales
+ sed quis dolor.
+
+
+
+
+
+ Accordion title
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Vivamus sodales, nulla sit amet porttitor rhoncus, lacus
+ ex vestibulum libero, ac mollis neque ante id justo. Nam
+ tempor euismod nisi ac ornare. Pellentesque id sapien
+ lacinia, venenatis est aliquam, dignissim elit.
+ Suspendisse potenti. Cras ut ante in libero tempus sodales
+ sed quis dolor.
+
+
+
+
+
+ Accordion title
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Vivamus sodales, nulla sit amet porttitor rhoncus, lacus
+ ex vestibulum libero, ac mollis neque ante id justo. Nam
+ tempor euismod nisi ac ornare. Pellentesque id sapien
+ lacinia, venenatis est aliquam, dignissim elit.
+ Suspendisse potenti. Cras ut ante in libero tempus sodales
+ sed quis dolor.
+
+
+
+
+
+
+
+
+
+
+ Accordion title
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Vivamus sodales, nulla sit amet porttitor rhoncus, lacus
+ ex vestibulum libero, ac mollis neque ante id justo. Nam
+ tempor euismod nisi ac ornare. Pellentesque id sapien
+ lacinia, venenatis est aliquam, dignissim elit.
+ Suspendisse potenti. Cras ut ante in libero tempus
+ sodales sed quis dolor.
+
+
+
+
+
+ Accordion title
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Vivamus sodales, nulla sit amet porttitor rhoncus, lacus
+ ex vestibulum libero, ac mollis neque ante id justo. Nam
+ tempor euismod nisi ac ornare. Pellentesque id sapien
+ lacinia, venenatis est aliquam, dignissim elit.
+ Suspendisse potenti. Cras ut ante in libero tempus
+ sodales sed quis dolor.
+
+
+
+
+
+ Accordion title
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Vivamus sodales, nulla sit amet porttitor rhoncus, lacus
+ ex vestibulum libero, ac mollis neque ante id justo. Nam
+ tempor euismod nisi ac ornare. Pellentesque id sapien
+ lacinia, venenatis est aliquam, dignissim elit.
+ Suspendisse potenti. Cras ut ante in libero tempus
+ sodales sed quis dolor.
+
+
+
+
+
+
+
+
+
+ Accordion with actions
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Vivamus sodales, nulla sit amet porttitor rhoncus, lacus ex
+ vestibulum libero, ac mollis neque ante id justo. Nam tempor
+ euismod nisi ac ornare.
+
+
+
+
+
+
+
+
+
+
+
+ Custom arrow
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Vivamus sodales, nulla sit amet porttitor rhoncus, lacus ex
+ vestibulum libero, ac mollis neque ante id justo. Nam tempor
+ euismod nisi ac ornare. Pellentesque id sapien lacinia,
+ venenatis est aliquam, dignissim elit. Suspendisse potenti.
+ Cras ut ante in libero tempus sodales sed quis dolor.
+
+ This is a tonal Alert. Notice the lack of icons - it's not
+ really needed here.
+
+
+
+
+
+
Another Alert
+
+ This is an outlined Alert. Why not use a
+ Card since they
+ look very similar? For one, the Alert is a more focused
+ component with different properties.
+
+ "Occupy your mind, don't stay home. Talk to all your friends,
+ but don't look at your phone”
+
+
+
+
+
+
+
+
+
+
+
+
rich text
+
docs/components/rich-text.md
+
+ Back to top
+
+
+
+ By default, Tailwind removes all of the default browser styling from
+ paragraphs, headings, lists and more. This ends up being really useful
+ for building application UIs because you spend less time undoing
+ user-agent styles, but when you _really are_ just trying to style some
+ content that came from a rich-text editor in a CMS or a markdown file,
+ it can be surprising and unintuitive.
+
+ We get lots of complaints about it actually, with people regularly
+ asking us things like:
+
+
+
+ Why is Tailwind removing the default styles on my
+ h1 elements? How do I disable this? What do you mean
+ I lose all the other base styles too?
+
+
+
+ We hear you, but we're not convinced that simply disabling our base
+ styles is what you really want. You don't want to have to remove
+ annoying margins every time you use a p element in a
+ piece of your dashboard UI. And I doubt you really want your blog
+ posts to use the user-agent styles either — you want them to look
+ awesome, not awful.
+
+
+ The @tailwindcss/typography plugin is our attempt to
+ give you what you actually want, without any of the
+ downsides of doing something stupid like disabling our base styles.
+
+
+ It adds a new prose class that you can slap on any
+ block of vanilla HTML content and turn it into a beautiful,
+ well-formatted document:
+
+
+ html
+
<article class="prose">
+ <h1>Garlic bread with cheese: What the science tells us</h1>
+ <p>
+ For years parents have espoused the health benefits of eating garlic bread
+ with cheese to their children, with the food earning such an iconic status
+ in our culture that kids will often dress up as warm, cheesy loaf for
+ Halloween.
+ </p>
+ <p>
+ But a recent study shows that the celebrated appetizer may be linked to a
+ series of rabies cases springing up around the country.
+ </p>
+ <!-- ... -->
+ </article>
+
+
+ For more information about how to use the plugin and the features it
+ includes,
+ read the documentation.
+
+ What follows from here is just a bunch of absolute nonsense I've
+ written to dogfood the plugin itself. It includes every sensible
+ typographic element I could think of, like
+ bold text, unordered lists, ordered lists, code
+ blocks, block quotes, and even italics.
+
+
+ It's important to cover all of these use cases for a few reasons:
+
+
+
We want everything to look good out of the box.
+
+ Really just the first reason, that's the whole point of the
+ plugin.
+
+
+ Here's a third pretend reason though a list with three items looks
+ more realistic than a list with two items.
+
+ So that's a header for you — with any luck if we've done our job
+ correctly that will look pretty reasonable.
+
+
Something a wise person once told me about typography is:
+
+
+ Typography is pretty important if you don't want your stuff to
+ look like trash. Make it good then it won't be bad.
+
+
+
+ It's probably important that images look okay here by default as
+ well:
+
+
+
+
+ Contrary to popular belief, Lorem Ipsum is not simply random text.
+ It has roots in a piece of classical Latin literature from 45 BC,
+ making it over 2000 years old.
+
+
+
+ Now I'm going to show you an example of an unordered list to make
+ sure that looks good, too:
+
+ Sometimes you have headings directly underneath each other. In those
+ cases you often have to undo the top margin on the second heading
+ because it usually looks better for the headings to be closer
+ together than a paragraph followed by a heading should be.
+
+ When a heading comes after a paragraph, we need a bit more space,
+ like I already mentioned above. Now let's see what a more complex
+ list would look like.
+
+
+
+
+ I often do this thing where list items have headings.
+
+
+ For some reason I think this looks cool which is unfortunate
+ because it's pretty annoying to get the styles right.
+
+
+ I often have two or three paragraphs in these list items, too,
+ so the hard part is getting the spacing between the paragraphs,
+ list item heading, and separate list items to all make sense.
+ Pretty tough honestly, you could make a strong argument that you
+ just shouldn't write this way.
+
+
+
+
+ Since this is a list, I need at least two items.
+
+
+ I explained what I'm doing already in the previous list item,
+ but a list wouldn't be a list if it only had one item, and we
+ really want this to look realistic. That's why I've added this
+ second list item so I actually have something to look at when
+ writing the styles.
+
+
+
+
+ It's not a bad idea to add a third item either.
+
+
+ I think it probably would've been fine to just use two items but
+ three is definitely not worse, and since I seem to be having no
+ trouble making up arbitrary things to type, I might as well
+ include it. I'm going to press Enter now.
+
+
+
+
+ After this sort of list I usually have a closing statement or
+ paragraph, because it kinda looks weird jumping right to a heading.
+
+ I think most people are going to use
+ highlight.js
+ or
+ Prism
+ or something if they want to style their code blocks but it wouldn't
+ hurt to make them look okay out of the box, even with no
+ syntax highlighting.
+
+
+ Here's what a default tailwind.config.js file looks
+ like at the time of writing:
+
+ Nested lists basically always look bad which is why editors like
+ Medium don't even let you do it, but I guess since some of you
+ goofballs are going to do it we have to carry the burden of at least
+ making it work.
+
+
+
+ Nested lists are rarely a good idea.
+
+
+ You might feel like you are being really "organized" or
+ something but you are just creating a gross shape on the
+ screen that is hard to read.
+
+
+ Nested navigation in UIs is a bad idea too, keep things as
+ flat as possible.
+
+
+ Nesting tons of folders in your Installation is also not
+ helpful.
+
+
+
+
+ Since we need to have more items, here's another one.
+
+
+ I'm not sure if we'll bother styling more than two levels
+ deep.
+
+
+ Two is already too much, three is guaranteed to be a bad idea.
+
+
If you nest four levels deep you belong in prison.
+
+
+
+ Two items isn't really a list, three is good though.
+
+
+ Again please don't nest lists if you want people to actually
+ read your content.
+
+
Nobody wants to look at this.
+
I'm upset that we even have to bother styling this.
+
+
+
+
+ The most annoying thing about lists in Markdown is that
+ <li> elements aren't given a child
+ <p> tag unless there are multiple paragraphs in
+ the list item. That means I have to worry about styling that
+ annoying situation too.
+
+
+
+
For example, here's another nested list.
+
But this time with a second paragraph.
+
+
These list items won't have <p> tags
+
Because they are only one line each
+
+
+
+
+ But in this second top-level list item, they will.
+
+
+ This is especially annoying because of the spacing on this
+ paragraph.
+
+
+
+
+ As you can see here, because I've added a second line, this
+ list item now has a <p> tag.
+
+
This is the second line I'm talking about by the way.
+
+
+
+ Finally here's another list item so it's more like a list.
+
+
+
+
+
+
+ A closing list item, but with no nested list, because why not?
+
+ Well, that's not exactly true, we first released this plugin back in
+ 2020 and it took three years before we added description lists. But
+ they're here now, so let's just be happy about that…okay? They can
+ be great for things like FAQs.
+
+
+
Why do you never see elephants hiding in trees?
+
+ Because they're so good at it. Lorem ipsum dolor sit amet
+ consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
+
+
What do you call someone with no body and no nose?
+
+ Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing
+ elit. Culpa, voluptas ipsa quia excepturi, quibusdam natus
+ exercitationem sapiente tempore labore voluptatem.
+
+
Why can't you hear a pterodactyl go to the bathroom?
+
+ Because the pee is silent. Lorem ipsum dolor sit amet, consectetur
+ adipisicing elit. Ipsam, quas voluptatibus ex culpa ipsum,
+ aspernatur blanditiis fugiat ullam magnam suscipit deserunt illum
+ natus facilis atque vero consequatur! Quisquam, debitis error.
+
+ I almost forgot to mention links, like
+ this link to the Tailwind CSS website. We almost made them blue but that's so yesterday, so we went with
+ dark gray, feels edgier.
+
+
We even included table styles, check it out:
+
+
+
+
Wrestler
+
Origin
+
Finisher
+
+
+
+
+
Bret "The Hitman" Hart
+
Calgary, AB
+
Sharpshooter
+
+
+
Stone Cold Steve Austin
+
Austin, TX
+
Stone Cold Stunner
+
+
+
Randy Savage
+
Sarasota, FL
+
Elbow Drop
+
+
+
Vader
+
Boulder, CO
+
Vader Bomb
+
+
+
Razor Ramon
+
Chuluota, FL
+
Razor's Edge
+
+
+
+
+ We also need to make sure inline code looks good, like if I wanted
+ to talk about <span> elements or tell you the
+ good news about @tailwindcss/typography.
+
+ Even though it's probably a bad idea, and historically I've had a
+ hard time making it look good. This
+ "wrap the code blocks in backticks" trick works pretty well
+ though really.
+
+
+ Another thing I've done in the past is put a code tag
+ inside of a link, like if I wanted to tell you about the
+ tailwindcss/docs
+ repository. I don't love that there is an underline below the
+ backticks but it is absolutely not worth the madness it would
+ require to avoid it.
+
+ But now we have. Please don't use h5 or
+ h6 in your content, Medium only supports two heading
+ levels for a reason, you animals. I honestly considered using a
+ before pseudo-element to scream at you if you use an
+ h5 or h6.
+
+
+ We don't style them at all out of the box because
+ h4 elements are already so small that they are the same
+ size as the body copy. What are we supposed to do with an
+ h5, make it smaller than the body copy? No
+ thanks.
+
+
+ We still need to think about stacked headings though.
+
+
+
+ Let's make sure we don't screw that up with
+ h4 elements, either.
+
+
+
+ Phew, with any luck we have styled the headings above this text and
+ they look pretty good.
+
+
+ Let's add a closing paragraph here so things end with a decently
+ sized block of text. I can't explain why I want things to end that
+ way but I have to assume it's because I think things will look weird
+ or unbalanced if there is a heading too close to the end of the
+ document.
+
+
+ What I've written here is probably long enough, but adding this
+ final sentence can't hurt.
+
+ 
+ 
+ 
+ 
+ 
+