เริ่มต้นและปฏิบัติจริงกับ Tailwind CSS: สร้างอินเทอร์เฟซเว็บที่ตอบสนองทันสมัยตั้งแต่เริ่มต้น

Tailwind CSS คืออะไร?

ในการพัฒนา CSS แบบดั้งเดิม เรามักจะนิยามชื่อคลาสที่มีความหมายสำหรับองค์ประกอบของหน้าเว็บ จากนั้นจึงเขียนกฎสไตล์ที่เฉพาะเจาะจงในสไตล์ชีทที่แยกต่างหาก วิธีนี้มักนำไปสู่ความจำเป็นในการสลับไปมาระหว่างไฟล์ HTML และ CSS บ่อยครั้ง และเมื่อโครงการเติบโตขึ้น สไตล์ชีทจะกลายเป็นเรื่องยุ่งยากและยากต่อการบำรุงรักษาTailwind CSS กลับใช้แนวคิดของเฟรมเวิร์ก CSS แบบอะตอมมิก “ลำดับความสำคัญของฟังก์ชัน” ที่แตกต่างอย่างสิ้นเชิง มันให้ชุดเครื่องมือที่ใหญ่โต มีความละเอียดสูง และสามารถนำกลับมาใช้ใหม่ได้ นักพัฒนาสามารถใช้คลาสเหล่านี้โดยตรงใน HTML หรือ JSX ผ่านการผสมผสานคลาสเหล่านี้เพื่อสร้างการออกแบบใดๆ ก็ได้

ข้อได้เปรียบหลักของมันคือ มันขจัดความจำเป็นในการพึ่งพา CSS ที่กำหนดเอง คุณไม่จำเป็นต้องคิดชื่อคลาสสำหรับปุ่ม การ์ด หรือแถบนำทางอีกต่อไป และไม่ต้องกังวลเกี่ยวกับความขัดแย้งของสไตล์ ตัวอย่างเช่น หากต้องการสร้างปุ่มที่มีมุมโค้ง พื้นหลังสีน้ำเงิน ตัวอักษรสีขาว และช่องว่างภายใน คุณเพียงแค่เขียน:<button class=“rounded bg-blue-500 text-white p-4”>按钮</button>วิธีการพัฒนานี้ช่วยเพิ่มความเร็วและความสม่ำเสมอในการสร้างอินเทอร์เฟซผู้ใช้อย่างมาก และผ่านเครื่องมือต่างๆ เช่น PurgeCSS (ซึ่งถูกสร้างเป็นเครื่องมือเพิ่มประสิทธิภาพใน Tailwind v3 และรุ่นที่สูงกว่า) สามารถลบสไตล์ที่ไม่ได้ใช้โดยอัตโนมัติ ส่งผลให้ไฟล์ CSS ที่สร้างขึ้นสุดท้ายมีขนาดกะทัดรัดมาก

วิธีการเริ่มต้นใช้งาน Tailwind CSS

เริ่มต้นใช้งาน Tailwind CSS มีหลายวิธีที่พบบ่อยที่สุดคือผ่านเครื่องมือ CLI อย่างเป็นทางการหรือการผสานรวมกับเครื่องมือสร้าง front-end

แนะนำให้อ่าน คู่มือเริ่มต้นใช้งาน Tailwind CSS: สร้างอินเทอร์เฟซที่ทันสมัยและตอบสนองได้ตั้งแต่เริ่มต้น。

ติดตั้งอย่างรวดเร็วผ่าน npm และ CLI

วิธีที่แนะนำมากที่สุดคือการติดตั้งผ่าน npm และใช้เครื่องมือ command line เพื่อเริ่มต้นใช้งาน ก่อนอื่นในไดเรกทอรีรูทของโปรเจกต์ของคุณ ผ่าน terminal ให้รันคำสั่งต่อไปนี้เพื่อติดตั้ง Tailwind และ dependencies ของมัน:

ผู้ช่วยสร้างเว็บไซต์ WordPress.com

99.999% ความพร้อมใช้งาน+การป้องกันความเสียหายข้ามโซน, สนับสนุนตลอด 24 ชั่วโมงทุกวัน, ซื้อแพ็คเกจบล็อกและใช้ AI สร้างเว็บไซต์ฟรี

ชื่อโดเมนฟรีหนึ่งปี

เข้าถึงผู้ช่วยสร้างเว็บไซต์ WordPress.com →

ผู้ช่วยสร้างเว็บไซต์ UltaHost

900+ เทมเพลตฟรีที่ปรับแต่งได้, ได้รับความสามารถ SEO ที่จำเป็นสำหรับการเปิดรับการค้นหาเว็บไซต์ที่ปรับให้เหมาะสม

ส่วนลด 40%

เข้าถึง UltaHost เว็บไซต์ตัวช่วยสร้าง →

npm install -D tailwindcss
npx tailwindcss init

คำสั่งแรกจะ tailwindcss ติดตั้งเป็น dependency สำหรับการพัฒนา คำสั่งที่สองจะสร้างไฟล์การกำหนดค่าเริ่มต้น tailwind.config.jsไฟล์นี้เป็นหัวใจในการปรับแต่งธีม Tailwind, เพิ่มปลั๊กอิน, กำหนดเส้นทาง Purge

กำหนดค่าไฟล์การกำหนดค่า Tailwind

สร้างขึ้น tailwind.config.js เนื้อหาเริ่มต้นของไฟล์นั้นเรียบง่าย เพื่อให้แน่ใจว่า Tailwind สามารถสแกนไฟล์ HTML ของคุณและลบสไตล์ที่ไม่ได้ใช้ คุณต้องกำหนดค่า content ฟิลด์ ตัวอย่างเช่น ในโปรเจกต์ Vue หรือ React ทั่วไป การกำหนดค่าอาจมีลักษณะดังนี้:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [“./src/**/*.{html,js,vue,jsx,tsx}”],
  theme: {
    extend: {},
  },
  plugins: [],
}

การกำหนดค่านี้บอกให้ Tailwind สแกน src ไฟล์ทั้งหมดที่มีนามสกุลที่ระบุในไดเรกทอรี และดึงคลาสยูทิลิตีที่ใช้จากไฟล์เหล่านั้น

นำเข้าโครงสร้างพื้นฐานสไตล์ลงในโปรเจกต์

หลังจากติดตั้งและกำหนดค่าแล้ว คุณต้องนำเข้าเลเยอร์ต่าง ๆ ของ Tailwind ในไฟล์ CSS หลักของโปรเจกต์ โดยปกติคุณจะสร้างไฟล์ชื่อ src/styles.css 或 src/index.css และเพิ่มคำสั่งต่อไปนี้:

แนะนำให้อ่าน เชี่ยวชาญ Tailwind CSS: คู่มือปฏิบัติจากเริ่มต้นถึงระดับสูง。

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base จะฉีดสไตล์พื้นฐานของ Tailwind สำหรับรีเซ็ตสไตล์เริ่มต้นและให้พื้นฐานที่สม่ำเสมอ@tailwind components จะฉีดคลาสคอมโพเนนต์ที่มาพร้อมกับ Tailwind (เช่น คอนเทนเนอร์) และที่คุณกำหนดผ่าน @apply คลาสคอมโพเนนต์ที่ลงทะเบียนคำสั่ง@tailwind utilities ซึ่งจะฉีดคลาสฟังก์ชันทั้งหมดเข้าไป นี่เป็นส่วนที่สำคัญที่สุด

สุดท้าย ตรวจสอบให้แน่ใจว่ากระบวนการสร้างของคุณ (เช่น การใช้ Vite, Webpack) สามารถจัดการไฟล์ CSS นี้ได้ หรือผ่านคำสั่ง CLI npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch เพื่อคอมไพล์แบบเรียลไทม์

Tailwind CSS ฟังก์ชันหลักของคลาสอธิบายอย่างละเอียด

Tailwind CSS คลาสยูทิลิตี้ครอบคลุมคุณสมบัติ CSS ทั้งหมด เช่น การจัดวาง, ระยะห่าง, การจัดรูปแบบข้อความ, สี, เส้นขอบ, เอฟเฟกต์ เป็นต้น กฎการตั้งชื่อมีความชัดเจนมาก โดยทั่วไปจะปฏิบัติตาม 属性{方向？}-{尺寸} รูปแบบ

Bluehost ผู้ช่วยสร้างเว็บไซต์

ให้เครื่องมือสร้างเว็บไซต์ AI, แชทออนไลน์และสนับสนุนทางโทรศัพท์ตลอด 24/7, ชื่อโดเมนฟรีหนึ่งปี, CDN ฟรี, SLA เวลาทำงานปกติ 99.99%

เข้าชม Bluehost

การควบคุมระยะห่างและขนาด

Tailwind ใช้ระบบมาตราส่วนตัวเลขแบบรวมศูนย์เพื่อควบคุมระยะห่างภายในและภายนอก ความกว้าง และความสูง ตัวอย่างเช่นp-4 หมายถึง padding: 1rem(ค่าเริ่มต้น 1 หน่วย = 0.25rem)m-2 หมายถึง margin: 0.5remคุณสามารถใช้ px-、py-、pt-、pr- และคำนำหน้าเพื่อระบุทิศทางที่เฉพาะเจาะจง สำหรับขนาดw-64 หมายถึง width: 16rem，h-screen หมายถึง height: 100vhความสม่ำเสมอนี้ทำให้การเว้นระยะและการจัดตำแหน่งขององค์ประกอบอินเทอร์เฟซง่ายและเป็นระเบียบอย่างยิ่ง

สีและสไตล์พื้นหลัง

Tailwind มีจานสีที่ออกแบบมาอย่างดี โดยแต่ละสีมีระดับความเข้มตั้งแต่ 50 ถึง 900 ผ่านชื่อคลาสเช่น text-blue-600(สีข้อความ),bg-gray-100(สีพื้นหลัง),border-red-300(สีเส้นขอบ) สามารถนำไปใช้ได้ทันที คุณยังสามารถใช้พื้นหลังไล่ระดับได้อย่างง่ายดาย เช่น bg-gradient-to-r from-cyan-500 to-blue-500 แสดงถึงการไล่ระดับสีเชิงเส้นจากสีฟ้าอ่อนไปยังสีน้ำเงินจากซ้ายไปขวา

การออกแบบที่ตอบสนองและสถานะการโต้ตอบ

การออกแบบที่ตอบสนองของ Tailwind ปฏิบัติตามหลักการ “มือถือก่อน” คลาสฟังก์ชันทั้งหมดได้รับการออกแบบสำหรับอุปกรณ์มือถือโดยค่าเริ่มต้น หากต้องการใช้สไตล์บนจุดพักที่ใหญ่กว่า คุณต้องเพิ่มคำนำหน้าตอบสนองที่เกี่ยวข้อง ตัวอย่างเช่นtext-center md:text-left lg:text-2xl หมายถึงการจัดข้อความกึ่งกลางบนอุปกรณ์มือถือ และบนหน้าจอขนาดกลาง (md:) ขึ้นไปจัดชิดซ้าย บนหน้าจอขนาดใหญ่ (lg:) ขึ้นไปตั้งค่าขนาดตัวอักษรเป็น 1.5rem。

แนะนำให้อ่าน เชี่ยวชาญ Tailwind CSS: คู่มือแนวคิดหลักและเทคนิคการใช้งานจากมือใหม่สู่ระดับสูง。

การจัดการสถานะการโต้ตอบก็ง่ายดายเช่นกัน คุณสามารถใช้คำนำหน้าเช่น hover:、focus:、active: เพื่อเพิ่มสไตล์สำหรับสถานะต่างๆ ตัวอย่างเช่น<button class=“bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 …”> สามารถสร้างเอฟเฟกต์เมื่อโฮเวอร์และโฟกัสได้อย่างง่ายดาย โดยไม่ต้องเขียน CSS แบบกำหนดเองใดๆ

ปฏิบัติจริง: สร้างคอมโพเนนต์การ์ดด้วย Tailwind CSS

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

โฮสติ้ง.com

SSL ฟรี, Cloudflare CDN, WAF, มีให้เลือกมากกว่า 40 ศูนย์ข้อมูลทั่วโลก, ความหน่วงต่ำกว่าใกล้เคียง, การสนับสนุนบริการ 24/7/365, ตอนนี้สามารถประหยัดได้สูงสุด 67%, รองรับ AI build และ SEO optimization

เยี่ยมชมhosting.com

ขั้นแรก เราสร้างโครงสร้าง HTML พื้นฐานของการ์ด และใช้คลาสสำหรับการจัดวางและคอนเทนเนอร์พื้นฐาน:

<div class="“max-w-sm" rounded-xl overflow-hidden shadow-lg bg-white mx-auto my-8”>
  <!-- 图片区域 -->
  <img class="“w-full" h-48 object-cover” src="“https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600”" alt="“ผลิตภัณฑ์เทคโนโลยี”">
  <!-- 内容区域 -->
  <div class="“px-6" py-4”>
    <div class="“font-bold" text-xl mb-2 text-gray-800”>คู่มือปฏิบัติการ Tailwind CSS</div>
    <p class="“text-gray-600" text-base”>
      เรียนรู้วิธีใช้คลาสยูทิลิตี้แบบอะตอมมิกเพื่อสร้างอินเทอร์เฟซผู้ใช้สมัยใหม่ที่สวยงาม สอดคล้องกัน และมีประสิทธิภาพสูง โดยไม่ต้องสลับไปมาระหว่างไฟล์ต่างๆ มุ่งเน้นที่การออกแบบเอง
    </p>
  </div>
  <!-- 标签区域 -->
  <div class="“px-6" pt-2 pb-4”>
    <span class="“inline-block" bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2”>#CSS Framework</span>
    <span class="“inline-block" bg-green-100 text-green-800 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2”>#การพัฒนา Front-end</span>
    <span class="“inline-block" bg-purple-100 text-purple-800 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2”># ตอบสนอง</span>
  </div>
  <!-- 行动按钮 -->
  <div class="“px-6" pb-6”>
    <button class="“w-full" bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-medium py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-opacity-50”>
      อ่านทันที
    </button>
  </div>
</div>

การวิเคราะห์โครงสร้างและสไตล์การ์ด

ในการ์ดนี้ เราใช้คลาสยูทิลิตี้จำนวนมาก คอนเทนเนอร์ชั้นนอกสุดใช้ max-w-sm เพื่อจำกัดความกว้างสูงสุดrounded-xl เพื่อทำให้มุมโค้งมนขนาดใหญ่shadow-lg เพิ่มเงาลึกเพื่อสร้างความรู้สึกสามมิติbg-white ตั้งพื้นหลังเป็นสีขาวmx-auto จัดให้อยู่กึ่งกลางแนวนอน

พื้นที่รูปภาพผ่าน h-48 แก้ไขความสูงและใช้ object-cover เพื่อให้แน่ใจว่าภาพถูกครอบตัดและเติมเต็ม พื้นที่เนื้อหามีการเว้นระยะภายในควบคุมโดย px-6 py-4 หัวข้อใช้ตัวหนา (font-bold) ขนาดตัวอักษรใหญ่ (text-xl) และระยะขอบด้านล่าง (mb-2）。

แท็กใช้บล็อกในบรรทัด (inline-block) ร่วมกับสีพื้นหลัง, สีตัวอักษร, มุมโค้งมน (rounded-full) และระยะขอบภายในเล็กๆ (px-3 py-1）เพื่อให้ได้สไตล์แคปซูล ปุ่มจะรวมพื้นหลังไล่ระดับสี（bg-gradient-to-r）、การเปลี่ยนแปลงไล่ระดับสีเมื่อโฮเวอร์（hover:from-、hover:to-）、ภาพเคลื่อนไหวการเปลี่ยนผ่าน（transition duration-300）และวงแหวนโฟกัส（focus:ring-2) และเอฟเฟกต์ขั้นสูงอื่น ๆ

ทำให้คอมโพเนนต์การ์ดมีความตอบสนอง

เพื่อให้การ์ดแสดงผลได้ดีขึ้นบนหน้าจอขนาดใหญ่ เราสามารถเพิ่มคลาสตอบสนองได้อย่างง่ายดาย ตัวอย่างเช่น เราต้องการให้บนหน้าจอขนาดกลาง (md:) ขึ้นไป การ์ดสามารถจัดเรียงในแนวนอนได้ โดยมีรูปภาพอยู่ทางซ้ายและเนื้อหาอยู่ทางขวา เราสามารถปรับโครงสร้างภายนอกและคลาสของรูปภาพและเนื้อหาได้เล็กน้อย:

<div class="“max-w-4xl" md:flex rounded-xl overflow-hidden shadow-lg bg-white mx-auto my-8”>
  <img class="“md:w-1/3" w-full h-48 md:h-auto object-cover” src="“…”" alt="“…”">
  <div class="“md:w-2/3" p-6 md:p-8”>
    <!-- 标题、描述、标签、按钮等内容 -->
  </div>
</div>

โดยการเพิ่ม md:flex ทำให้คอนเทนเนอร์กลายเป็นเลย์เอาต์ Flex บนหน้าจอขนาดกลาง และใช้ md:w-1/3 和 md:w-2/3 ควบคุมอัตราส่วนความกว้างของรูปภาพและพื้นที่เนื้อหา รูปภาพ md:h-auto ให้ความสูงปรับตัวตามเนื้อหา พื้นที่เนื้อหา md:p-8 เพิ่มระยะห่างภายในบนหน้าจอขนาดใหญ่ เพียงแค่ปรับเปลี่ยนคลาสไม่กี่บรรทัด การ์ดตอบสนองก็เสร็จสมบูรณ์

สรุป

Tailwind CSS ด้วยไลบรารีคลาสที่เน้นฟังก์ชันการทำงานและเป็นอะตอมมิก ได้ปฏิวัติวิธีการเขียน CSS ของเราอย่างสิ้นเชิง มันขจัดภาระทางจิตใจในการตั้งชื่อสไตล์ และเพิ่มประสิทธิภาพและความสม่ำเสมอในการพัฒนา UI อย่างมาก ตั้งแต่การควบคุมระยะห่างแบบง่ายไปจนถึงเลย์เอาต์ตอบสนองที่ซับซ้อนและสถานะการโต้ตอบ ทั้งหมดสามารถทำได้อย่างรวดเร็วผ่านการรวมชื่อคลาสที่เข้าใจง่าย แม้ว่าตอนแรกการเขียนชื่อคลาสจำนวนมากใน HTML จะดู “ไม่สวยงาม” แต่การปรับปรุงประสบการณ์การพัฒนา การลดต้นทุนการบำรุงรักษา และไฟล์สไตล์ประสิทธิภาพสูงที่ได้ในท้ายที่สุด ทำให้มันกลายเป็นโซลูชันสไตล์ที่แข่งขันได้ในโครงการเว็บสมัยใหม่ ผ่านการแนะนำเบื้องต้นและการฝึกปฏิบัติจริงในบทความนี้ หวังว่าคุณจะเริ่มต้นการเดินทางพัฒนาด้วย Tailwind CSS ที่มีประสิทธิภาพได้อย่างราบรื่น

คำถามที่พบบ่อย (FAQ)

Tailwind CSS แตกต่างจากสไตล์อินไลน์อย่างไร?

Tailwind CSS แตกต่างโดยพื้นฐานจากสไตล์อินไลน์ สไตล์อินไลน์ (แอตทริบิวต์style=””style) ไม่สามารถใช้ media queries เพื่อออกแบบให้ตอบสนองได้ และไม่สามารถจัดการกับสถานะเทียมเช่น :hover 或 :focusนอกจากนี้ สไตล์อินไลน์จะเขียนทับสไตล์อื่น ๆ ทั้งหมดและขาดข้อจำกัด

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

ในโครงการขนาดใหญ่ ชื่อคลาสใน HTML ยาวเกินไปและดูยุ่งเหยิง ควรทำอย่างไร?

สำหรับสไตล์คอมโพเนนต์ที่ซับซ้อนซึ่งปรากฏซ้ำ ๆ Tailwind แนะนำให้ใช้ @apply คำสั่งในการแยกคลาสคอมโพเนนต์ใน CSS หรือใช้ความสามารถในการคอมโพเนนต์ของเฟรมเวิร์ก JavaScript (เช่น React, Vue) เพื่อแคปซูล

ตัวอย่างเช่น คุณสามารถแยกชุดคลาสปุ่มที่ซับซ้อนนั้นออกเป็นคลาสคอมโพเนนต์ CSS:

.btn-primary {
  @apply w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-medium py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-opacity-50;
}

แล้วใช้ใน HTML โดยตรง <button class=“btn-primary”>แนวปฏิบัติที่ดีกว่าคือการสร้าง <Button> คอมโพเนนต์ใน React หรือสร้างคอมโพเนนต์ใน Vue <MyButton> คอมโพเนนต์ ซึ่งจะห่อหุ้มสไตล์ไว้ภายในคอมโพเนนต์ ทำให้เทมเพลตยังคงกระชับ

Tailwind CSS เพิ่มประสิทธิภาพขนาดไฟล์ CSS ที่สร้างขึ้นสุดท้ายได้อย่างไร

Tailwind CSS ในโหมดการพัฒนาจะสร้างสไตล์ชีตขนาดใหญ่ที่มีคลาสยูทิลิตีที่เป็นไปได้ทั้งหมด เพื่อความสะดวกในการพัฒนาอย่างรวดเร็ว แต่ในขั้นตอนการสร้างสำหรับการผลิต มันจะเริ่มขั้นตอนการเพิ่มประสิทธิภาพที่สำคัญมาก

มันจะขึ้นอยู่กับที่คุณกำหนดค่าในไฟล์การตั้งค่า tailwind.config.js 的 content ระบุเส้นทางไฟล์ในฟิลด์ เพื่อสแกนไฟล์เทมเพลตทั้งหมด (เช่น .html, .jsx, .vue) เพื่อค้นหาชื่อคลาสยูทิลิตี้ที่คุณใช้จริงอย่างแม่นยำ จากนั้นลบสไตล์ทั้งหมดที่ไม่ได้ใช้ออกจากไฟล์ CSS สุดท้ายอย่างสมบูรณ์ กระบวนการนี้ได้รับการปรับให้เหมาะสมสูง ซึ่งโดยทั่วไปสามารถบีบอัดขนาดไฟล์ CSS สุดท้ายให้เหลือเพียง 10KB หรือน้อยกว่า เพื่อให้ได้ประสิทธิภาพการทำงานที่ยอดเยี่ยม

สามารถปรับแต่งระบบการออกแบบเริ่มต้นของ Tailwind ได้หรือไม่?

ได้อย่างแน่นอน นี่เป็นหนึ่งในจุดแข็งของ Tailwind CSS การปรับแต่งทั้งหมดอยู่ภายใต้ tailwind.config.js ในไดเรกทอรีรากของโปรเจกต์

คุณสามารถทำได้ที่ theme.extend วัตถุเพื่อขยายธีมเริ่มต้น เช่น การเพิ่มสีใหม่ ค่าช่องว่าง ขนาดฟอนต์ หรือจุดพัก คุณยังสามารถทำได้ใน theme การเขียนทับบางส่วนของธีมเริ่มต้นโดยตรงในอ็อบเจ็กต์ ตัวอย่างเช่น คุณสามารถกำหนดสีหลักและจุดพักแบบกำหนดเองได้ดังนี้:

module.exports = {
  theme: {
    extend: {
      colors: {
        ‘brand-blue’: ‘#1992d4’,
      },
      spacing: {
        ‘128’: ‘32rem’,
      }
    },
    screens: {
      ‘tablet’: ‘640px’,
      ‘laptop’: ‘1024px’,
      ‘desktop’: ‘1280px’,
    },
  },
}

ด้วยวิธีนี้ คุณสามารถใช้ bg-brand-blue、w-128 และ tablet: คลาสที่กำหนดเองเช่นนี้