#What if we stack headings? #We should make sure that looks good, too. Later, we’ll use longer, more complex list items.Īnd that’s the end of this section.In this example we’re keeping the items short.So here is the first item in this list.Now I’m going to show you an example of an unordered list to make sure that looks good, too: It’s probably important that images look okay here by default as well: Typography is pretty important if you don’t want your stuff to look like trash. Something a wise person once told me about typography is: So that’s a header for you - with any luck if we’ve done our job correctly that will look pretty reasonable. Now we’re going to try out another header style. Here’s a third pretend reason though a list with three items looks more realistic than a list with two items.Really just the first reason, that’s the whole point of the plugin.We want everything to look good out of the box.It’s important to cover all of these use cases for a few reasons:
#Layout code
It includes every sensible typographic element I could think of, like bold text, unordered lists, ordered lists, code blocks, block quotes, and even italics. What follows from here is just a bunch of absolute nonsense I’ve written to dogfood the plugin itself.
#Layout how to
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: Garlic bread with cheese: What the science tells us įor years parents have espoused the health benefits of eating garlic bread with cheese to theirĬhildren, with the food earning such an iconic status in our culture that kids will often dressīut a recent study shows that the celebrated appetizer may be linked to a series of rabies casesįor more information about how to use the plugin and the features it includes, read the documentation. The 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.
And I doubt you really want your blog posts to use the user-agent styles either - you want them to look awesome, not awful. You don’t want to have to remove annoying margins every time you use a p element in a piece of your dashboard UI. We hear you, but we’re not convinced that simply disabling our base styles is what you really want. 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 get lots of complaints about it actually, with people regularly asking us things like: 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. #Heading 1 #Heading 2 #Heading 3 #Heading 4īy default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more.
0 kommentar(er)
