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

Tailwind CSS คืออะไร

ในโลกของการพัฒนาเว็บ CSS Framework เกิดขึ้นมากมาย และTailwind CSSด้วยแนวคิด “Utility-First” ที่เป็นเอกลักษณ์ ทำให้มันโดดเด่นออกมา มันไม่ใช่ชุด UI ที่ให้คอมโพเนนต์ที่กำหนดไว้ล่วงหน้า แต่เป็นชุดเครื่องมือที่ให้คลาส CSS ระดับต่ำและละเอียด นักพัฒนาสามารถสร้างการออกแบบที่กำหนดเองได้โดยตรงใน HTML ผ่านการรวมคลาส CSS แบบอะตอมมิกเหล่านี้ (เช่นtext-center、mt-4、bg-blue-500) รูปแบบนี้ได้ปฏิวัติวิธีการเขียนสไตล์ของนักพัฒนา โดยย้ายการตัดสินใจเกี่ยวกับสไตล์จากไฟล์ CSS กลับไปยังภาษามาร์กอัปหรือเทมเพลต ทำให้เกิดการเชื่อมโยงอย่างใกล้ชิดระหว่างสไตล์และโครงสร้าง ซึ่งนำมาซึ่งความเร็วและความยืดหยุ่นในการพัฒนาที่ไม่เคยมีมาก่อน

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

วิธีการติดตั้งและกำหนดค่า

หากต้องการเริ่มใช้งานTailwind CSSคุณสามารถรวมเข้ากับโปรเจกต์ของคุณได้หลายวิธี วิธีหลักคือการติดตั้งผ่านตัวจัดการแพ็คเกจ Node.js (เช่น npm หรือ yarn)

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

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

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

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

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

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

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

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

ส่วนลด 40%

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

npm install -D tailwindcss
npx tailwindcss init

ดำเนินการnpx tailwindcss initคำสั่งจะสร้างไฟล์หลักชื่อtailwind.config.jsไฟล์นี้ใช้สำหรับกำหนดค่าTailwind CSSที่นี่คุณสามารถกำหนดธีมสี แบบอักษร จุดพัก (breakpoints) ปลั๊กอิน ฯลฯ ของโครงการได้ การกำหนดค่าที่เรียบง่ายอาจมีลักษณะดังต่อไปนี้ ซึ่งระบุว่าTailwind CSSต้องสแกนไฟล์ใดบ้างสำหรับการล้างสไตล์ (Purge)

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

ต่อไปนี้ คุณต้องนำเข้าเลเยอร์ต่างๆ ของ Tailwind ลงในไฟล์ CSS หลักของโปรเจกต์ โดยทั่วไปไฟล์นี้จะถูกตั้งชื่อเป็นsrc/styles.css或input.css。

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

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

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

คำสั่งนี้จะทำการติดตาม./src/input.cssการเปลี่ยนแปลงของไฟล์ และคอมไพล์แบบเรียลไทม์ไปยัง./dist/output.cssคุณเพียงแค่ต้องเชื่อมโยงไฟล์ที่สร้างเสร็จแล้วoutput.cssใน HTML ก็เพียงพอ

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

คลาสยูทิลิตี้หลักและการออกแบบที่ตอบสนอง

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

การจัดวางและระยะห่าง

การควบคุมเลย์เอาต์และระยะห่างเป็นการดำเนินการที่พบบ่อยที่สุดในการพัฒนาในแต่ละวันTailwind CSSมีคลาสที่หลากหลายให้ใช้งาน ตัวอย่างเช่นflex、gridใช้สำหรับการสร้างเลย์เอาต์;m-4(margin),p-6(padding) ใช้สำหรับควบคุมระยะห่างภายในและภายนอก ตัวเลขมักสอดคล้องกับหน่วย rem (โดยทั่วไปเป็นผลคูณของ 0.25rem)m-autoหมายถึงระยะห่างภายนอกอัตโนมัติ

<div class="flex justify-between items-center p-6">
  <div class="m-2">โครงการที่หนึ่ง</div>
  <div class="m-2">โครงการที่สอง</div>
</div>

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

ระบบสีเป็นส่วนหนึ่งของธีม คุณสามารถใช้เช่นtext-gray-800ตั้งค่าสีข้อความbg-blue-500ตั้งค่าสีพื้นหลังborder-red-300ตั้งค่าสีขอบ ตัวเลข (50 ถึง 900) แสดงถึงการไล่ระดับความเข้มของสี ซึ่งให้ความสม่ำเสมอในการออกแบบสูง

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

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

เข้าชม Bluehost

จุดพักการตอบสนอง

การออกแบบที่ตอบสนองได้เป็นTailwind CSSจุดแข็งของมัน โดยมีคำนำหน้าจุดพักห้าจุดให้โดยค่าเริ่มต้น:sm:、md:、lg:、xl:、2xl:คุณสามารถเพิ่มคำนำหน้าเหล่านี้ก่อนคลาสยูทิลิตี้ใดๆ เพื่อระบุว่าสไตล์นั้นจะทำงานที่ความกว้างหน้าจอเฉพาะหรือมากกว่า

<div class="text-center md:text-left lg:flex">
  <p class="w-full lg:w-1/2">บนมือถือฉันจะแสดงอยู่ตรงกลาง บนหน้าจอขนาดกลางจะจัดชิดซ้าย บนหน้าจอขนาดใหญ่ฉันจะอยู่ในคอนเทนเนอร์ flex และมีความกว้างครึ่งหนึ่ง</p>
</div>

วิธีการ “มือถือก่อน” นี้หมายความว่าสไตล์ที่ไม่มีคำนำหน้าจะใช้ได้กับทุกหน้าจอ ในขณะที่สไตล์ที่มีคำนำหน้าจะเขียนทับสไตล์สำหรับหน้าจอที่ใหญ่กว่า ทำให้การสร้างเลย์เอาต์ตอบสนองที่ซับซ้อนชัดเจนและง่ายดายอย่างยิ่ง

ภาคปฏิบัติ: การสร้างคอมโพเนนต์การ์ด

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

แนะนำให้อ่าน Tailwind CSS พื้นฐานและการปฏิบัติจริง: คู่มือการใช้งานสำหรับการสร้างเว็บไซต์ที่ตอบสนองและทันสมัย。

ขั้นแรก เราสร้างคอนเทนเนอร์พื้นฐานของการ์ด โดยใช้มุมโค้ง เงา และระยะห่างภายในเพื่อกำหนดลำดับชั้นทางสายตาของการ์ด

<div class="max-w-sm rounded-2xl overflow-hidden shadow-lg bg-white p-6">
  <!-- 卡片内容将放在这里 -->
</div>

ถัดไป ภายในคอนเทนเนอร์ เราสร้างการจัดวางแบบ flex เพื่อจัดเรียงรูปโปรไฟล์และข้อมูลผู้ใช้

โฮสติ้ง.com

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

เยี่ยมชมhosting.com

<div class="flex items-center space-x-4 mb-4">
  <img class="w-12 h-12 rounded-full object-cover" src="/avatar.jpg" alt="รูปโปรไฟล์ผู้ใช้">
  <div>
    <h3 class="text-xl font-bold text-gray-900">จางซาน</h3>
    <p class="text-gray-500">วิศวกรพัฒนาเว็บไซต์</p>
  </div>
</div>

จากนั้น เพิ่มเนื้อหาหลักที่อธิบายการ์ด

<p class="text-gray-700 mb-6">
  นี่คือตัวอย่างการ์ดคอมโพเนนต์ที่สร้างด้วย<code data-no-auto-translation="">Tailwind CSS</code>มันแสดงให้เห็นถึงวิธีการรวมคลาสยูทิลิตี้เพื่อสร้างองค์ประกอบ UI ที่มีการออกแบบภาพที่ดีและตอบสนองได้อย่างสมบูรณ์อย่างรวดเร็ว
</p>

สุดท้าย เราเพิ่มปุ่ม ใช้คำนำหน้าที่ตอบสนองเพื่อให้ปุ่มมีความกว้างเต็มจอบนหน้าจอขนาดเล็ก และปรับความกว้างตามเนื้อหาบนหน้าจอขนาดใหญ่

<button class="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition duration-300 ease-in-out transform hover:-translate-y-1">
  了解更多
</button>

เมื่อรวบรวมโค้ดทั้งหมดข้างต้น คุณจะได้ส่วนประกอบการ์ดที่สมบูรณ์ โดยการปรับค่าmax-w-smการเว้นระยะภายใน หรือคำนำหน้าจุดแตกหัก คุณสามารถปรับแต่งการแสดงผลบนอุปกรณ์ต่างๆ ได้อย่างง่ายดาย การปฏิบัตินี้แสดงให้เห็นอย่างชัดเจนTailwind CSS“เวิร์กโฟลว์ที่มีประสิทธิภาพของ ”การออกแบบในมาร์กอัป'

สรุป

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

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

Tailwind CSS ทำให้ HTML กลายเป็นไฟล์ใหญ่และยุ่งเหยิงหรือไม่?

จริงอยู่ การเขียนคลาสจำนวนมากใน HTML โดยตรงจะทำให้แท็กดูยาวและซับซ้อนมากขึ้น นี่คือTailwind CSSข้อเสียที่ถูกกล่าวถึงบ่อยที่สุด

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

จะปรับแต่งสีธีมหรือระยะห่างได้อย่างไร?

การปรับแต่งธีมหลัก ๆ ทำได้โดยการแก้ไขที่tailwind.config.jsทำการตั้งค่าโดยใช้ไฟล์คอนฟิก

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

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1a73e8',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

หลังจากตั้งค่าเสร็จแล้ว คุณสามารถใช้งานในโปรเจกต์ได้bg-brand-blue或w-128คลาสที่กำหนดเองแบบนี้ วิธีนี้ช่วยให้มั่นใจว่าระบบการออกแบบของคุณมีความสอดคล้องกันทั่วทั้งโครงการ

มันเหมาะที่จะใช้กับเฟรมเวิร์ก front-end ใดบ้าง

Tailwind CSSสามารถผสานรวมได้อย่างสมบูรณ์แบบกับเฟรมเวิร์กและไลบรารี front-end สมัยใหม่เกือบทั้งหมด นี่เป็นหนึ่งในเหตุผลสำคัญที่ทำให้เป็นที่นิยม

ในเฟรมเวิร์กเชิงคอมโพเนนต์เช่น React, Vue, Angular หรือ Svelte คุณสามารถใช้คลาส Tailwind ในเทมเพลตคอมโพเนนต์ได้เหมือนใน HTML ทั่วไป เครื่องมือโครงสร้างของเฟรมเวิร์กหลายตัว (เช่น Next.js, Vite) มีให้ใช้งานได้ทันทีTailwind CSSตัวเลือกการรวม นอกจากนี้ปลั๊กอินทางการเช่น@tailwindcss/forms、@tailwindcss/typographyสามารถแก้ไขปัญหาสถานการณ์เฉพาะเช่นรูปแบบฟอร์มและรูปแบบเนื้อหา Rich Text ได้ดีขึ้น ซึ่งช่วยยกระดับประสบการณ์การพัฒนาที่ทำงานร่วมกับเฟรมเวิร์กต่างๆ

ไฟล์ CSS สุดท้ายในสภาพแวดล้อมการผลิตจะมีขนาดใหญ่ไหม?

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

ในขั้นตอนการสร้างสำหรับการผลิตTailwind CSSจะใช้กลไก “การทำความสะอาด” (Purge) (ซึ่งในรุ่น v3.0 ขึ้นไปเรียกว่า “การสแกนเนื้อหา”) ในการวิเคราะห์ไฟล์เทมเพลตของคุณ (ระบุในฟิลด์tailwind.config.js的content) เพื่อรวมเฉพาะคลาส CSS ที่ใช้งานจริงลงในไฟล์ CSS สุดท้าย ซึ่งหมายความว่าไฟล์ CSS ที่สร้างขึ้นในที่สุดมักจะมีขนาดเพียงไม่กี่กิโลไบต์ถึงสิบกว่ากิโลไบต์ ซึ่งเล็กกว่าไฟล์ CSS ที่เขียนด้วยมือหรือ CSS ของเฟรมเวิร์ก UI ที่ไม่ได้ปรับแต่งมาก ทำให้รับประกันประสิทธิภาพการโหลดที่ยอดเยี่ยม