Effortless typography, even in dark mode - Tailwind CSS Typography v0.5

In this video, I'll walk you through all of the new features in Tailwind CSS Typography v0.5, including dark mode support, new customization possibilities, and a better way to embed outside markup in your content.
Announcement: tailwindcss.com/blog/tailwind...
Documentation: tailwindcss.com/docs/typograp...

[@rahulsriram6295]

The amount of times I reach the documentation of Tailwind is getting lesser and lesser daily due to these videos...Great Job Simon

[@simonswiss]

That's great to hear!

[@indigo0086]

They really did make the effort to build a universal intuition around their css utilities. raw css isn't nearly this intuitive imo, I'm learning more about css from using tailwind than my 10 years of hacking around with css.

[@Felipe-53]

Wow, this is absolutelly phenomenal! Great job there, these new features are exactly what I was missing with this plugin. Awesome stuff!

[@martinfilteau8668]

Simon, you're making Tailwind CSS so much fun to use! Thanks!

[@IanZamojc]

Really awesome to see Typography getting some love. The overrides are a very welcome change.

[@santiagogalindohidalgo9876]

Wow... finally we got not-prose, I couldn't help but update my project, worked like a charm, thanks for all the great work =)

[@Felipe-53]

dark-mode for this plugin is a awesome, and so is the "not-prose" class. Amazing!

[@buddhavskungfu]

Excellent! I won't go back to any other CSS framework or vanilla. That said, when will we get dark mode for the documentations? I've been inverting the doc pages with the page with a plugin/extension when designing and it's not ideal.

[@patheticgeek]

+1 dark mode docs!!

[@andylib]

+1

[@SimplyMerlin]

its there now

[@abdulbasir8740]

Just applied these new features in my website, so happy we can now style all details of markdown.

[@nomus3101]

Love these video from SImon, quick and straight to the point.

[@dance2die]

You just had go on and have to make my life EASIER.... :) I was using Typography plugin for blog but had to use "important" to override. Now I will update the code while implementing dark mode.

[@rimzzlabs]

Wow this is awesome update, looking forward for the syntax highlighting support!

[@iUmerFarooq]

Amazing! just changing single property it change entire layout. Thank you tailwind team.

[@swyxTV]

THIS SOLVES EVERY PROBLEM I HAD WITH TAILWIND TYPOGRAPHY. THANK YOU TEAM

[@christostsangaris4785]

TailwindCSS never seizes to amaze me!

[@justingolden21]

Lot of info and awesome features in a short referenceable video, nice

[@jugibur2117]

As always enriching and entertaining, thanks!

[@Jangeroo]

These videos are so insanely good, imma finally give tailwind a shot

[@adR9990]

Holy crap this is an amazingly useful plugin for developers who aren't great at styling content! I need to use this right now.

[@valtism]

Lucked into using 0.5 even before the docs on it were out. `not-prose` was a lifesaver. Make sure to wear sunscreen, Simon!

[@sugiii9616]

Tailwind is a drug, i cant live without it now, thank you so much

[@gorkacesium]

keeps getting better and better

[@johnofone]

Great video!!! (Love all the videos! So so so helpful!!!)

[@Quabbe2]

not-prose is just great. Love you guys!

[@NirazanBsnt]

Great work. My fav TailwindCss

[@codernerd7076]

All great new features! 😃👍

[@H-Root]

Big love for your great efforts ♥

[@karsongrady]

I just love where tailwind is going

[@MrSonicastra]

Nice, thanks for this Tailwindcss!

[@gabriellinassi3382]

This is so nice. Thank you!

[@lokenathkarmakar]

This is going to be really useful

[@galaxiegalaxie5003]

Great, thanks, we also need full on videos tutorial on svelte and tailwind css 3.0,may be one great site

[@awksomeid6965]

amazing as always

[@martinh4982]

Very nice! Will tailwindcss/forms get an opt out feature like this one?

[@PhilipDanielHayton]

This is incredible

[@Muphet]

tailwind just keeps on wow-ing me every update

[@dexdevlon]

Man, I love TailWindCSS.

[@HeyNoah]

This is awesomeeeeeeee!!! Thank you thank you thank you!!!

[@vinit.khandelwal]

Fabulous example

[@DanteMishima]

This is very very very useful!

[@4c4rn4ge]

Loving the background of the thumbnail picture! Want a tutorial about it ! :P

[@MarjoForcado]

I love you guys!!

[@aiyushg1769]

Brilliant :)

[@DioArsya]

always.always.great!

[@islemmedjahdi3737]

Wow! thank you so much

[@waleedmumtaz]

Awesome! ♥

[@amirsaedi356]

You're awesome bro 👌

[@AddMotionLeb]

Excellent. Is there a typography for rtl languages ?

[@azam920]

Yeap as always amazing 👍

[@Kimeru]

Amazing!

[@s1n7ax]

Amaizing video

[@Balance-8]

Would you want to use prose if you had to do some flexbox inside of the markdown?

[@samarbid13]

can you do more content on the dynamic styles that are coupled with javaScript? in other words, how can Tailwind replace StyledComponents when it comes to custom animations or conditional behaviors with JavaScript?

[@neociber24]

I'm curious about that too, but I think that's what *Headless UI* library is for, is build by the TailwindCSS team.

[@abbahanoh4809]

Hi Simon ! What stack did you use in this video ? pleazzzzz

[@JasonChannelOne]

so awesome!

[@miad7202]

I love it!

[@maciejka1]

i remember how amazed i was when friend of mine said "have you heard about tailwind? "

[@codephilip]

Awesome 👏

[@stefanmichalsky-hirschberg1545]

Awesome!

[@lsagar]

Mindblown

[@WhOAmI-eo5lf]

Thanks a lot

[@debjit21]

Any tutorial on how to build dark/normal mode toggle with react? I love to checkout.

[@alexandersamokhin]

When you have many classes they are breaking up to the next line. How to achieve it? I have prettier installed and tried to edit some settings, but still having long lines of classes that don’t break.

[@emmanuelmorales9308]

In Astro the prose-pre: bg and prose-pre:text has to overwitted. In prose-pre:!bg works but in prose-pre:!text not

[@ginsilver8771]

How are you adding the markdown, i am trying to do it in react

[@aminezz2584]

Hi 👋What font are you using in vs code

[@lawrencemotions8720]

Please do a video with tailwind css keyframes and custom animations , Would love some content about Keyframing and creating costume animations with keyframing in tailwind.config.

[@mohammadjavadi2283]

Wooooow that's good 👍

[@maxhamulyak8013]

Which framework did you use for this demo / rendering the markdown?

[@neociber24]

Not sure, but looks like a pipe from Angular

[@AlejandroVivas]

We don't deserve you, guys. Thank you!!

[@bassman2145]

Does anyone know what font is being used in the code editor?

[@GammaWraith]

Is there a way to add other variants for theming. eg. Dark - darkmode, (default) - lightmode), "custom-teal" - "teal theme", "custom-indigo"-"indigo-theme" ?

[@anaycoding6594]

You can make a plugin with a new variant that only applies to an element that is a descendant of anything wih a class of teal-theme

[@DanielSpravtsev]

Oh God, thanks for ‘not-prose’ 😁

[@JoelDzs]

How does the dark mode toggle work ?

[@amirbahador.developer]

ty sir 🙏🏻🌷🌹❤️👍

[@muneebakram1670]

what is the background music name?

[@garbjorn1757]

Hello how can I have a button with bg-indigo-600 and hover:bg-indigo-400 and dark:bg-sky-600 but how can I change hover bg when in dark mode?

[@TailwindLabs]

Combine the modifiers like dark:hover:bg-sky-400 👍

[@kooh4558]

hello i love the font, what's the name??

[@marvin_e]

top tier

[@user-ji7mq7sn6w]

Tailwind is ❤️

[@abdelilahou2822]

guys help tailwind v 3 doesnt work on vue 3 i dont know why if any one tried it bfr i need some help ASAP

[@apvarun]

Sweeeeeet!!

[@LordTeleman]

Noice!

[@gidmanone]

i know this is a joke but can someone please explain it. thanks

[@simonswiss]

@@gidmanone Sounds like the perfectly normal way to say "nice" here in Australia 🤣

[@gidmanone]

@@simonswiss accent ..huh

[@himanshusrivastava931]

1. Click on the video 2. Like the video before watching it 3. Now you are ready to learn how to do magic 😁

[@laden6675]

Why is this a plugin, and not included by default in Tailwind?

[@abacuswithrehan264]

Because It might not get used all time and it will increase package size

[@AntNZ]

Wait....... You can use markdown as an html datasource........ 😳

[@neociber24]

I think is a framework, looks like Angular

[@karngyan]

boom

[@user-mu9yo2nz1w]

Bow

[@itdobedat]

I M U H G U H

[@twitchizle]

grey

[@victorlongon]

Wow, ok tailwind brings some good things to the table (although i think is far from perfect as a lot of people thing), but saying "complex css in js" complex syntax and comparing to 4 lines of classNames. Come on dude 😅

[@pama4546]

Prose is great option, but unfortunately it can only be used in code components, not in the whole project as base. It is a pity that we have to set up typography that we already have in prose code.

[@mirzarm]

img 😂🤣😭😭😭😭

[@muhamadrafipamungkas4465]

Tailwind is witchcraft

[@Felipe-53]

dark-mode for this plugin is a awesome, and so is the "not-prose" class. Amazing!

[@quick_007]

Amazing!

[@smakosh]

Amazing!