tailwindcss typography
v0.5.15
Plugin Tipografi CSS Tailwind resmi menyediakan serangkaian kelas prose yang dapat Anda gunakan untuk menambahkan default tipografi yang indah ke HTML vanilla apa pun yang tidak Anda kendalikan, seperti HTML yang dirender dari Markdown, atau diambil dari CMS.
< article class =" prose lg:prose-xl " > {{ markdown }} </ article >Untuk melihat aksinya, lihat demo langsung kami di Tailwind Play.
Instal plugin dari npm:
npm install -D @tailwindcss/typography Kemudian tambahkan plugin ke file tailwind.config.js Anda:
/** @type {import('tailwindcss').Config} */
module . exports = {
theme : {
// ...
} ,
plugins : [
require ( '@tailwindcss/typography' ) ,
// ...
] ,
} Sekarang Anda dapat menggunakan kelas prose untuk menambahkan gaya tipografi yang masuk akal ke HTML vanilla apa pun:
< 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 >Plugin ini menyertakan kelas pengubah untuk masing-masing dari lima skala abu-abu yang disertakan Tailwind secara default sehingga Anda dapat dengan mudah menata konten agar sesuai dengan abu-abu yang Anda gunakan dalam proyek Anda.
< article class =" prose prose-slate " > {{ markdown }} </ article >Berikut adalah kelas-kelas yang dihasilkan menggunakan build Tailwind CSS v2.0 yang sepenuhnya default:
| Kelas | Skala abu-abu |
|---|---|
prose-gray (default) | Abu-abu |
prose-slate | Batu tulis |
prose-zinc | Seng |
prose-neutral | Netral |
prose-stone | Batu |
Kelas pengubah dirancang untuk digunakan dengan pola pengubah kelas jamak dan harus digunakan bersama dengan kelas prose dasar.
Catatan
Selalu sertakan kelas prose saat menambahkan pengubah skala abu-abu
< article class =" prose prose-stone " > {{ markdown }} </ article >Untuk mempelajari cara membuat tema warna Anda sendiri, baca dokumentasi menambahkan tema warna khusus.
Pengubah ukuran memungkinkan Anda menyesuaikan ukuran keseluruhan tipografi Anda untuk konteks yang berbeda.
< article class =" prose prose-xl " > {{ markdown }} </ article >Lima ukuran tipografi berbeda disertakan di luar kotak:
| Kelas | Ukuran font tubuh |
|---|---|
prose-sm | 0,875rem (14 piksel) |
prose-base (default) | 1rem (16 piksel) |
prose-lg | 1.125rem (18 piksel) |
prose-xl | 1,25rem (20 piksel) |
prose-2xl | 1,5rem (24 piksel) |
Ini dapat digunakan bersama dengan pengubah breakpoint Tailwind untuk mengubah ukuran font keseluruhan suatu konten pada ukuran area pandang yang berbeda:
< article class =" prose md:prose-lg lg:prose-xl " > {{ markdown }} </ article >Segala sesuatu tentang pengubah ukuran yang disediakan telah disesuaikan oleh desainer profesional agar terlihat seindah mungkin, termasuk hubungan antara ukuran font, spasi judul, bantalan blok kode, dan banyak lagi.
Pengubah ukuran dirancang untuk digunakan dengan pola pengubah kelas jamak dan harus digunakan bersama dengan kelas prose dasar.
Catatan
Selalu sertakan kelas prose saat menambahkan pengubah ukuran
< article class =" prose prose-lg " > {{ markdown }} </ article >Untuk mempelajari tentang menyesuaikan skala tipe yang disertakan, baca dokumentasi tentang menyesuaikan CSS.
Setiap tema warna default menyertakan versi mode gelap rancangan tangan yang dapat Anda picu dengan menambahkan kelas prose-invert :
< article class =" prose dark:prose-invert " > {{ markdown }} </ article >Untuk mempelajari cara membuat tema warna Anda sendiri, baca dokumentasi menambahkan tema warna khusus.
Gunakan pengubah elemen untuk menyesuaikan gaya masing-masing elemen dalam konten Anda langsung di HTML Anda:
< article class =" prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600 " >
{{ markdown }}
</ article >Hal ini memudahkan untuk melakukan hal-hal seperti tautan gaya agar sesuai dengan merek Anda, menambahkan radius batas pada gambar, dan banyak lagi.
Berikut daftar lengkap pengubah elemen yang tersedia:
| Pengubah | Target |
|---|---|
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 |
Saat menumpuk pengubah ini dengan pengubah lain seperti hover , kemungkinan besar Anda ingin pengubah lain didahulukan:
< article class =" prose prose-a:text-blue-600 hover:prose-a:text-blue-500 " > {{ markdown }} </ article >Baca dokumentasi Tailwind CSS tentang pemesanan pengubah bertumpuk untuk mempelajari lebih lanjut.
Setiap pengubah ukuran dilengkapi dengan max-width yang dirancang untuk menjaga konten tetap mudah dibaca. Namun hal ini tidak selalu sesuai dengan keinginan Anda, dan terkadang Anda ingin konten memenuhi lebar wadahnya saja.
Dalam kasus tersebut, yang perlu Anda lakukan hanyalah menambahkan max-w-none ke konten Anda untuk mengganti max-width yang tertanam:
< 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 > Jika Anda memiliki blok markup yang tertanam di beberapa konten yang tidak mewarisi gaya prose , gunakan kelas not-prose untuk mem-sandbox-nya:
< 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 > Perhatikan bahwa Anda tidak dapat menyarangkan contoh prose baru dalam blok not-prose saat ini.
Anda dapat membuat tema warna Anda sendiri dengan menambahkan kunci baru di bagian typography file tailwind.config.js dan memberikan warna Anda di bawah kunci css :
/** @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' ) ,
// ...
] ,
}Lihat definisi gaya internal kami untuk beberapa contoh lainnya.
Jika Anda perlu menggunakan nama kelas selain prose karena alasan apa pun, Anda dapat melakukannya menggunakan opsi className saat mendaftarkan plugin:
/** @type {import('tailwindcss').Config} */
module . exports = {
theme : {
// ...
} ,
plugins : [
require ( '@tailwindcss/typography' ) ( {
className : 'wysiwyg' ,
} ) ,
]
. . .
} Sekarang setiap contoh prose dalam nama kelas default akan diganti dengan nama kelas khusus Anda:
< 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 > Jika Anda ingin menyesuaikan CSS mentah yang dihasilkan oleh plugin ini, tambahkan penggantian Anda di bawah kunci typography di bagian theme file tailwind.config.js Anda:
/** @type {import('tailwindcss').Config} */
module . exports = {
theme : {
extend : {
typography : {
DEFAULT : {
css : {
color : '#333' ,
a : {
color : '#3182ce' ,
'&:hover' : {
color : '#2c5282' ,
} ,
} ,
} ,
} ,
} ,
} ,
} ,
plugins : [
require ( '@tailwindcss/typography' ) ,
// ...
] ,
} Seperti semua penyesuaian tema di Tailwind, Anda juga dapat menentukan tombol typography sebagai fungsi jika Anda memerlukan akses ke bantuan theme :
/** @type {import('tailwindcss').Config} */
module . exports = {
theme : {
extend : {
typography : ( theme ) => ( {
DEFAULT : {
css : {
color : theme ( 'colors.gray.800' ) ,
// ...
} ,
} ,
} ) ,
} ,
} ,
plugins : [
require ( '@tailwindcss/typography' ) ,
// ...
] ,
} Penyesuaian harus diterapkan pada pengubah tertentu seperti DEFAULT atau xl , dan harus ditambahkan di bawah properti css . Penyesuaian dibuat dalam sintaksis CSS-in-JS yang sama dengan yang digunakan untuk menulis plugin Tailwind.
Lihat gaya default untuk plugin ini untuk contoh lebih mendalam dalam mengonfigurasi setiap pengubah.
Untuk bantuan, diskusi tentang praktik terbaik, atau percakapan lain apa pun yang bermanfaat jika dapat ditelusuri:
Diskusikan plugin Tipografi CSS Tailwind di GitHub
Untuk ngobrol santai dengan orang lain menggunakan kerangka kerja:
Bergabunglah dengan Server Perselisihan CSS Tailwind
