TailwindCSS Typography

Apr 14, 2021

Plug-in elements are added to the components layer. Custom modifications to the prose plugin have to be imported after the components layer or added via @layer components.

The prose class from typography

None of the sizes are automatically responsive, but responsive variants are provided for each size modifier so you can easily change the typography size at different breakpoints:

<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl"> {{ markdown }} </article>

Remove backticks from inline code

module.exports = {
  theme: {
    extend: {
      typography: (theme) => {
        return {
          DEFAULT: {
            css: {
              ...
              "code::before": false,
              "code::after": false,
              "blockquote p:first-of-type::before": false,
              "blockquote p:last-of-type::after": false,
              ...

Fancy Underline

<div class="flex items-center justify-center min-h-screen bg-white min-w-screen">
    <a x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false" href="https://www.google.com"
        class="relative inline-block text-base font-medium text-indigo-500">
        <span class="block">Link Underline Animation</span>
        <span class="absolute bottom-0 left-0 inline-block w-full h-1 -mb-1 overflow-hidden">
            <span x-show="hover"
                class="absolute inset-0 inline-block w-full h-1 h-full transform border-t-2 border-indigo-500"
                x-transition:enter="transition ease-out duration-300" x-transition:enter-start="-translate-x-full"
                x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-out duration-300"
                x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"></span>
        </span>
    </a>
</div>

See also: [Link Underlines](Link Underlines)

Typography | 🔧 Tailwind CSS Config (meta.fr)

benface/tailwindcss-typography: Tailwind CSS plugin to generate typography utilities and text style components (github.com)

tailwind hugo

Related