tailwindcss typography Download - tailwindcss typography Quellcode herunterladen

Das offizielle Tailwind CSS Typography-Plugin bietet eine Reihe von prose , mit denen Sie schöne typografische Standardeinstellungen zu jedem Vanilla-HTML hinzufügen können, das Sie nicht kontrollieren, z. B. HTML, das von Markdown gerendert oder von einem CMS abgerufen wird.

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

Um zu sehen, wie es in Aktion aussieht, schauen Sie sich unsere Live-Demo auf Tailwind Play an.

Installation

Installieren Sie das Plugin von npm:

npm install -D @tailwindcss/typography

Fügen Sie dann das Plugin zu Ihrer tailwind.config.js -Datei hinzu:

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    // ...
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    // ...
  ] ,
}

Grundlegende Verwendung

Jetzt können Sie die prose -Klassen verwenden, um jedem Vanilla-HTML sinnvolle Typografiestile hinzuzufügen:

 < article class =" prose lg:prose-xl " >
  < 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 >

Auswahl einer Grauskala

Dieses Plugin enthält eine Modifikatorklasse für jede der fünf Graustufen, die Tailwind standardmäßig enthält, sodass Sie Ihren Inhalt problemlos an die Graustufen anpassen können, die Sie in Ihrem Projekt verwenden.

 < article class =" prose prose-slate " > {{ markdown }} </ article >

Hier sind die Klassen, die mit einem völlig standardmäßigen Tailwind CSS v2.0-Build generiert werden:

Klasse	Graustufen
`prose-gray` (Standard)	Grau
`prose-slate`	Schiefer
`prose-zinc`	Zink
`prose-neutral`	Neutral
`prose-stone`	Stein

Modifikatorklassen sind für die Verwendung mit dem Mehrklassen-Modifikatormuster konzipiert und müssen in Verbindung mit der Basis prose verwendet werden.

Notiz

Beziehen Sie immer die prose ein, wenn Sie einen Graustufenmodifikator hinzufügen

 < article class =" prose prose-stone " > {{ markdown }} </ article >

Weitere Informationen zum Erstellen eigener Farbthemen finden Sie in der Dokumentation zum Hinzufügen benutzerdefinierter Farbthemen.

Anwenden einer Typenskala

Mit Größenmodifikatoren können Sie die Gesamtgröße Ihrer Typografie für verschiedene Kontexte anpassen.

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

Im Lieferumfang sind fünf verschiedene Schriftgrößen enthalten:

Klasse	Schriftgröße des Körpers
`prose-sm`	0,875rem (14px)
`prose-base` (Standard)	1rem (16px)
`prose-lg`	1,125rem (18px)
`prose-xl`	1,25rem (20px)
`prose-2xl`	1,5rem (24px)

Diese können in Kombination mit den Haltepunktmodifikatoren von Tailwind verwendet werden, um die Gesamtschriftgröße eines Inhalts bei verschiedenen Ansichtsfenstergrößen zu ändern:

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

Alles an den bereitgestellten Größenmodifikatoren wurde von professionellen Designern von Hand optimiert, um ein möglichst schönes Aussehen zu erzielen, einschließlich der Beziehungen zwischen Schriftgrößen, Überschriftenabständen, Codeblockauffüllung und mehr.

Größenmodifikatoren sind für die Verwendung mit dem Mehrklassen-Modifikatormuster konzipiert und müssen in Verbindung mit der Basis prose verwendet werden.

Notiz

Schließen Sie immer die prose ein, wenn Sie einen Größenmodifikator hinzufügen

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

Um mehr über das Anpassen der enthaltenen Typenskalen zu erfahren, lesen Sie die Dokumentation zum Anpassen des CSS.

Anpassung an den Dunkelmodus

Jedes Standardfarbthema enthält eine von Hand entworfene Dark-Mode-Version, die Sie durch Hinzufügen der prose-invert -Klasse auslösen können:

 < article class =" prose dark:prose-invert " > {{ markdown }} </ article >

Weitere Informationen zum Erstellen eigener Farbthemen finden Sie in der Dokumentation zum Hinzufügen benutzerdefinierter Farbthemen.

Elementmodifikatoren

Verwenden Sie Elementmodifikatoren, um den Stil einzelner Elemente in Ihrem Inhalt direkt in Ihrem HTML anzupassen:

 < article class =" prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600 " >
  {{ markdown }}
</ article >

Dadurch ist es ganz einfach, Links so zu gestalten, dass sie zu Ihrer Marke passen, Bildern einen Randradius hinzuzufügen und vieles mehr.

Hier ist eine vollständige Liste der verfügbaren Elementmodifikatoren:

Modifikator	Ziel
`prose-headings:{utility}`	`h1` , `h2` , `h3` , `h4` , `th`
`prose-lead:{utility}`	`[class~="lead"]`
`prose-h1:{utility}`	`h1`
`prose-h2:{utility}`	`h2`
`prose-h3:{utility}`	`h3`
`prose-h4:{utility}`	`h4`
`prose-p:{utility}`	`p`
`prose-a:{utility}`	`a`
`prose-blockquote:{utility}`	`blockquote`
`prose-figure:{utility}`	`figure`
`prose-figcaption:{utility}`	`figcaption`
`prose-strong:{utility}`	`strong`
`prose-em:{utility}`	`em`
`prose-kbd:{utility}`	`kbd`
`prose-code:{utility}`	`code`
`prose-pre:{utility}`	`pre`
`prose-ol:{utility}`	`ol`
`prose-ul:{utility}`	`ul`
`prose-li:{utility}`	`li`
`prose-table:{utility}`	`table`
`prose-thead:{utility}`	`thead`
`prose-tr:{utility}`	`tr`
`prose-th:{utility}`	`th`
`prose-td:{utility}`	`td`
`prose-img:{utility}`	`img`
`prose-video:{utility}`	`video`
`prose-hr:{utility}`	`hr`

Wenn Sie diese Modifikatoren mit anderen Modifikatoren wie hover stapeln, möchten Sie höchstwahrscheinlich, dass der andere Modifikator an erster Stelle steht:

 < article class =" prose prose-a:text-blue-600 hover:prose-a:text-blue-500 " > {{ markdown }} </ article >

Weitere Informationen finden Sie in der CSS-Dokumentation von Tailwind zum Sortieren gestapelter Modifikatoren.

Maximale Breite überschreiben

Jeder Größenmodifikator verfügt über eine eingebrannte max-width um den Inhalt so gut lesbar wie möglich zu halten. Dies ist jedoch nicht immer das, was Sie möchten, und manchmal möchten Sie, dass der Inhalt nur die Breite des Containers ausfüllt.

In diesen Fällen müssen Sie lediglich max-w-none zu Ihrem Inhalt hinzufügen, um die eingebettete maximale Breite zu überschreiben:

 < div class =" grid grid-cols-4 " >
  < div class =" col-span-1 " >
    <!-- ... -->
  </ div >
  < div class =" col-span-3 " >
    < article class =" prose max-w-none " > {{ markdown }} </ article >
  </ div >
</ div >

Fortgeschrittene Themen

Typografiestile rückgängig machen

Wenn Sie einen Markup-Block in einen Inhalt eingebettet haben, der die prose Stile nicht erben sollte, verwenden Sie die Klasse not-prose um ihn zu sandboxen:

 < article class =" prose " >
  < h1 > My Heading </ h1 >
  < p > ... </ p >

  < div class =" not-prose " >
    <!-- Some example or demo that needs to be prose-free -->
  </ div >

  < p > ... </ p >
  <!-- ... -->
</ article >

Beachten Sie, dass Sie derzeit keine neuen prose Instanzen innerhalb eines not-prose -Blocks verschachteln können.

Hinzufügen benutzerdefinierter Farbthemen

Sie können Ihr eigenes Farbthema erstellen, indem Sie im Abschnitt typography Ihrer tailwind.config.js -Datei einen neuen Schlüssel hinzufügen und Ihre Farben unter dem css -Schlüssel bereitstellen:

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    extend : {
      typography : ( { theme } ) => ( {
        pink : {
          css : {
            '--tw-prose-body' : theme ( 'colors.pink[800]' ) ,
            '--tw-prose-headings' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-lead' : theme ( 'colors.pink[700]' ) ,
            '--tw-prose-links' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-bold' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-counters' : theme ( 'colors.pink[600]' ) ,
            '--tw-prose-bullets' : theme ( 'colors.pink[400]' ) ,
            '--tw-prose-hr' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-quotes' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-quote-borders' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-captions' : theme ( 'colors.pink[700]' ) ,
            '--tw-prose-code' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-pre-code' : theme ( 'colors.pink[100]' ) ,
            '--tw-prose-pre-bg' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-th-borders' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-td-borders' : theme ( 'colors.pink[200]' ) ,
            '--tw-prose-invert-body' : theme ( 'colors.pink[200]' ) ,
            '--tw-prose-invert-headings' : theme ( 'colors.white' ) ,
            '--tw-prose-invert-lead' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-invert-links' : theme ( 'colors.white' ) ,
            '--tw-prose-invert-bold' : theme ( 'colors.white' ) ,
            '--tw-prose-invert-counters' : theme ( 'colors.pink[400]' ) ,
            '--tw-prose-invert-bullets' : theme ( 'colors.pink[600]' ) ,
            '--tw-prose-invert-hr' : theme ( 'colors.pink[700]' ) ,
            '--tw-prose-invert-quotes' : theme ( 'colors.pink[100]' ) ,
            '--tw-prose-invert-quote-borders' : theme ( 'colors.pink[700]' ) ,
            '--tw-prose-invert-captions' : theme ( 'colors.pink[400]' ) ,
            '--tw-prose-invert-code' : theme ( 'colors.white' ) ,
            '--tw-prose-invert-pre-code' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-invert-pre-bg' : 'rgb(0 0 0 / 50%)' ,
            '--tw-prose-invert-th-borders' : theme ( 'colors.pink[600]' ) ,
            '--tw-prose-invert-td-borders' : theme ( 'colors.pink[700]' ) ,
          } ,
        } ,
      } ) ,
    } ,
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    // ...
  ] ,
}

Weitere Beispiele finden Sie in unseren internen Stildefinitionen.

Ändern des Standardklassennamens

Wenn Sie aus irgendeinem Grund einen anderen Klassennamen als prose verwenden müssen, können Sie dies mit der Option className bei der Registrierung des Plugins tun:

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    // ...
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ( {
      className : 'wysiwyg' ,
    } ) ,
  ]
  . . .
}

Jetzt wird jedes Vorkommen von prose in den Standardklassennamen durch Ihren benutzerdefinierten Klassennamen ersetzt:

 < article class =" wysiwyg wysiwyg-slate lg:wysiwyg-xl " >
  < h1 > My Heading </ h1 >
  < p > ... </ p >

  < div class =" not-wysiwyg " >
    <!-- Some example or demo that needs to be prose-free -->
  </ div >

  < p > ... </ p >
  <!-- ... -->
</ article >

Anpassen des CSS

Wenn Sie das von diesem Plugin generierte Roh-CSS anpassen möchten, fügen Sie Ihre Überschreibungen unter dem typography im theme Ihrer tailwind.config.js -Datei hinzu:

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    extend : {
      typography : {
        DEFAULT : {
          css : {
            color : '#333' ,
            a : {
              color : '#3182ce' ,
              '&:hover' : {
                color : '#2c5282' ,
              } ,
            } ,
          } ,
        } ,
      } ,
    } ,
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    // ...
  ] ,
}

Wie bei allen Theme-Anpassungen in Tailwind können Sie auch den typography als Funktion definieren, wenn Sie Zugriff auf den theme Helfer benötigen:

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    extend : {
      typography : ( theme ) => ( {
        DEFAULT : {
          css : {
            color : theme ( 'colors.gray.800' ) ,

            // ...
          } ,
        } ,
      } ) ,
    } ,
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    // ...
  ] ,
}

Anpassungen sollten auf einen bestimmten Modifikator wie DEFAULT oder xl angewendet werden und müssen unter der css Eigenschaft hinzugefügt werden. Anpassungen werden in derselben CSS-in-JS-Syntax erstellt, die zum Schreiben von Tailwind-Plugins verwendet wird.

Ausführlichere Beispiele für die Konfiguration der einzelnen Modifikatoren finden Sie in den Standardstilen für dieses Plugin.