ดาวน์โหลด tailwindcss typography - ดาวน์โหลด tailwindcss typography รหัสที่มา

ปลั๊กอิน Typography CSS อย่างเป็นทางการของ Tailwind มีชุดคลาส prose ที่คุณสามารถใช้เพื่อเพิ่มค่าเริ่มต้นการพิมพ์ที่สวยงามให้กับ HTML ทั่วไปที่คุณไม่ได้ควบคุม เช่น HTML ที่แสดงผลจาก Markdown หรือดึงมาจาก CMS

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

หากต้องการดูว่าการใช้งานจริงเป็นอย่างไร ลองดูการสาธิตสดของเราบน Tailwind Play

การติดตั้ง

ติดตั้งปลั๊กอินจาก npm:

npm install -D @tailwindcss/typography

จากนั้นเพิ่มปลั๊กอินลงในไฟล์ tailwind.config.js ของคุณ:

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

การใช้งานขั้นพื้นฐาน

ตอนนี้คุณสามารถใช้คลาส prose เพื่อเพิ่มสไตล์การพิมพ์ที่สมเหตุสมผลให้กับ HTML วานิลลา:

 < 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 >

การเลือกระดับสีเทา

ปลั๊กอินนี้มีคลาสตัวปรับแต่งสำหรับสเกลสีเทาทั้งห้าสเกลที่ Tailwind รวมไว้เป็นค่าเริ่มต้น เพื่อให้คุณสามารถจัดรูปแบบเนื้อหาให้ตรงกับสีเทาที่คุณใช้ในโปรเจ็กต์ของคุณได้อย่างง่ายดาย

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

ต่อไปนี้เป็นคลาสที่สร้างขึ้นโดยใช้บิลด์ Tailwind CSS v2.0 ที่เป็นค่าเริ่มต้นทั้งหมด:

ระดับ	ระดับสีเทา
`prose-gray` (ค่าเริ่มต้น)	สีเทา
`prose-slate`	กระดานชนวน
`prose-zinc`	สังกะสี
`prose-neutral`	เป็นกลาง
`prose-stone`	หิน

คลาสโมดิฟายเออร์ได้รับการออกแบบให้ใช้กับรูปแบบโมดิฟายเออร์หลายคลาส และต้องใช้ร่วมกับคลาส prose ฐาน

บันทึก

รวมคลาส prose เสมอเมื่อเพิ่มตัวแก้ไขระดับสีเทา

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

หากต้องการเรียนรู้เกี่ยวกับการสร้างธีมสีของคุณเอง โปรดอ่านเอกสารการเพิ่มธีมสีที่กำหนดเอง

การใช้มาตราส่วนประเภท

ตัวปรับขนาดช่วยให้คุณสามารถปรับขนาดโดยรวมของตัวพิมพ์สำหรับบริบทที่แตกต่างกันได้

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

มีขนาดตัวอักษรที่แตกต่างกันห้าขนาดรวมอยู่ในกล่อง:

ระดับ	ขนาดตัวอักษรของเนื้อหา
`prose-sm`	0.875เรม (14px)
`prose-base` (ค่าเริ่มต้น)	1เรม (16px)
`prose-lg`	1.125เรม (18px)
`prose-xl`	1.25เรม (20px)
`prose-2xl`	1.5เรม (24px)

สามารถใช้ร่วมกับตัวแก้ไขเบรกพอยต์ของ Tailwind เพื่อเปลี่ยนขนาดแบบอักษรโดยรวมของเนื้อหาในขนาดวิวพอร์ตที่แตกต่างกัน:

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

ทุกอย่างเกี่ยวกับตัวแก้ไขขนาดที่ได้รับการปรับแต่งโดยนักออกแบบมืออาชีพเพื่อให้ดูสวยงามที่สุดเท่าที่จะเป็นไปได้ รวมถึงความสัมพันธ์ระหว่างขนาดตัวอักษร ระยะห่างของส่วนหัว การเติมบล็อกโค้ด และอื่นๆ

ตัวแก้ไขขนาดได้รับการออกแบบเพื่อใช้กับรูปแบบตัวแก้ไขหลายคลาส และต้องใช้ร่วมกับคลาส prose ฐาน

บันทึก

รวมคลาส prose เสมอเมื่อเพิ่มตัวแก้ไขขนาด

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

หากต้องการเรียนรู้เกี่ยวกับการปรับแต่งสเกลประเภทที่มีให้ โปรดอ่านเอกสารประกอบเกี่ยวกับการปรับแต่ง CSS

กำลังปรับเข้าสู่โหมดมืด

ธีมสีเริ่มต้นแต่ละธีมมีเวอร์ชันโหมดมืดที่ออกแบบด้วยมือ ซึ่งคุณสามารถกระตุ้นได้โดยการเพิ่มคลาส prose-invert :

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

ตัวดัดแปลงองค์ประกอบ

ใช้ตัวแก้ไของค์ประกอบเพื่อปรับแต่งสไตล์ของแต่ละองค์ประกอบในเนื้อหาของคุณโดยตรงใน HTML:

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

ทำให้ง่ายต่อการทำสิ่งต่างๆ เช่น ลิงก์สไตล์เพื่อให้เข้ากับแบรนด์ของคุณ เพิ่มรัศมีเส้นขอบให้กับรูปภาพ และอื่นๆ อีกมากมาย

นี่คือรายการตัวแก้ไของค์ประกอบที่มีอยู่ทั้งหมด:

ตัวแก้ไข	เป้า
`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`

เมื่อซ้อนโมดิฟายเออร์เหล่านี้กับโมดิฟายเออร์อื่น เช่น hover คุณมักต้องการให้โมดิฟายเออร์อื่นมาก่อน:

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

อ่านเอกสารประกอบ Tailwind CSS เกี่ยวกับการเรียงลำดับตัวแก้ไขแบบเรียงซ้อนเพื่อเรียนรู้เพิ่มเติม

การแทนที่ความกว้างสูงสุด

ตัวปรับขนาดแต่ละตัวมาพร้อมกับ max-width ที่ออกแบบมาเพื่อให้เนื้อหาอ่านได้มากที่สุด นี่ไม่ใช่สิ่งที่คุณต้องการเสมอไป และบางครั้งคุณอาจต้องการให้เนื้อหาเต็มความกว้างของคอนเทนเนอร์

ในกรณีดังกล่าว สิ่งที่คุณต้องทำคือเพิ่ม max-w-none ให้กับเนื้อหาของคุณเพื่อแทนที่ความกว้างสูงสุดที่ฝังไว้:

 < 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 >

หัวข้อขั้นสูง

ยกเลิกรูปแบบการพิมพ์

หากคุณมีบล็อกมาร์กอัปที่ฝังอยู่ในเนื้อหาบางส่วนที่ไม่ควรสืบทอดรูปแบบ prose ให้ใช้คลาส not-prose เพื่อทำแซนด์บ็อกซ์:

 < 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 >

โปรดทราบว่าคุณไม่สามารถซ้อนอินสแตนซ์ prose ใหม่ภายในบล็อก not-prose ในขณะนี้

การเพิ่มธีมสีที่กำหนดเอง

คุณสามารถสร้างธีมสีของคุณเองได้โดยเพิ่มคีย์ใหม่ในส่วนตัว typography ของไฟล์ tailwind.config.js และระบุสีของคุณใต้คีย์ 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' ) ,
    // ...
  ] ,
}

ดูคำจำกัดความสไตล์ภายในของเราสำหรับตัวอย่างเพิ่มเติม

การเปลี่ยนชื่อคลาสเริ่มต้น

หากคุณต้องการใช้ชื่อคลาสอื่นที่ไม่ใช่ prose ไม่ว่าด้วยเหตุผลใดก็ตาม คุณสามารถทำได้โดยใช้ตัวเลือก className เมื่อลงทะเบียนปลั๊กอิน:

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

ตอนนี้ทุกอินสแตนซ์ของ prose ในชื่อคลาสเริ่มต้นจะถูกแทนที่ด้วยชื่อคลาสที่คุณกำหนดเอง:

 < 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 >

การปรับแต่ง CSS

หากคุณต้องการปรับแต่ง Raw CSS ที่สร้างโดยปลั๊กอินนี้ ให้เพิ่มการแทนที่ของคุณใต้คีย์ typography ในส่วน theme ของไฟล์ tailwind.config.js ของคุณ:

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

เช่นเดียวกับการปรับแต่งธีมทั้งหมดใน Tailwind คุณยังสามารถกำหนดคีย์ typography เป็นฟังก์ชันได้ หากคุณต้องการเข้าถึงตัวช่วย theme :

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

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

การปรับแต่งควรใช้กับตัวปรับแต่งเฉพาะ เช่น DEFAULT หรือ xl และต้องเพิ่มไว้ใต้คุณสมบัติ css การปรับแต่งต่างๆ สร้างขึ้นโดยใช้ไวยากรณ์ CSS-in-JS เดียวกับที่ใช้ในการเขียนปลั๊กอิน Tailwind

ดูสไตล์เริ่มต้นสำหรับปลั๊กอินนี้สำหรับตัวอย่างเชิงลึกเพิ่มเติมของการกำหนดค่าตัวแก้ไขแต่ละตัว