คู่มือเริ่มต้นสำหรับการสร้างเว็บไซต์ตอบสนองสมัยใหม่โดยใช้เฟรมเวิร์ก Tailwind CSS

วิธีการเขียน CSS แบบดั้งเดิมกำหนดให้นักพัฒนาต้องสร้างคลาสสไตล์แยกต่างหากสำหรับแต่ละองค์ประกอบหรือเขียนกฎ CSS ที่ยาวเหยียด ซึ่งมักนำไปสู่สไตล์ชีตที่บวมและจัดการยาก ในขณะที่ Tailwind CSS นำแนวคิดที่แตกต่างอย่างสิ้นเชิงมาใช้ นั่นคือหลักการยูทิลิตี้-เฟิร์สท์ (Utility-First) โดยจะห่อหุ้มคุณสมบัติสไตล์เชิงอะตอมแต่ละอย่าง (เช่น สี, ระยะขอบ, ขนาดฟอนต์) ให้เป็นคลาสยูทิลิตี้แยกกัน นักพัฒนาสามารถสร้างอินเทอร์เฟซผู้ใช้ได้โดยการรวมคลาสยูทิลิตี้เหล่านี้เข้าด้วยกันโดยตรงในแอตทริบิวต์ class ขององค์ประกอบ HTML ซึ่งทำให้สไตล์และโครงสร้างผสานรวมกันอย่างแนบแน่น วิธีการนี้ช่วยให้การพัฒนามีการวนซ้ำที่เร็วขึ้น การออกแบบภาพที่สม่ำเสมอสูง และความเสี่ยงต่อสไตล์ที่ไม่ได้ใช้ (ส่วน CSS ที่ไม่ได้ใช้) น้อยมาก

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

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

คำสั่งเริ่มต้นจะสร้างไฟล์การกำหนดค่าหลักชื่อ tailwind.config.js ในไฟล์นี้ คุณสามารถปรับแต่งธีม เพิ่มสไตล์ที่กำหนดเอง กำหนดค่าแหล่งที่มาของเนื้อหาโครงการ (ซึ่งบอก Tailwind ให้สแกนไฟล์ใดบ้างเพื่อการปรับปรุงประสิทธิภาพในการสร้างผลลัพธ์)

แนะนำให้อ่าน การวิเคราะห์เชิงลึก: วิธีเชี่ยวชาญ Tailwind CSS อย่างมีประสิทธิภาพเพื่อสร้างอินเทอร์เฟซที่ตอบสนองต่ออุปกรณ์และทันสมัย。

ต่อไป คุณต้องนำเข้าไดเรกทีฟของ src/input.cssในไฟล์ CSS หลักของโปรเจกต์ของคุณ (เช่น Tailwind ).

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

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

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

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

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

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

ส่วนลด 40%

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

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

จากนั้น กำหนดค่าห่วงโซ่เครื่องมือสร้างของคุณ (เช่น Vite, Webpack) ให้ใช้ PostCSS ในการประมวลผลไฟล์ CSSTailwind ปลั๊กอิน PostCSS จะแทนที่คำสั่งเหล่านี้ด้วยคลาสยูทิลิตี้ที่สร้างขึ้นทั้งหมดโดยอัตโนมัติ

สุดท้าย สร้างไฟล์ CSS สุดท้ายโดยการรันคำสั่งสร้าง ในสภาพแวดล้อมการพัฒนาคุณยังสามารถใช้ npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch คำสั่งเพื่อเริ่มกระบวนการเฝ้าดูและเปิดใช้งานการโหลดใหม่แบบร้อน

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

Tailwind CSS เป็นระบบคลาสยูทิลิตี้ขนาดใหญ่และได้รับการออกแบบมาอย่างดี คลาสเหล่านี้เป็นไปตามข้อตกลงการตั้งชื่อที่เป็นเอกภาพ ทำให้จดจำและใช้งานได้ง่ายมาก ตัวอย่างเช่นp-4 หมายถึงช่องว่างภายใน (padding) ขนาด 1remtext-blue-600 หมายถึงสีข้อความเป็นสีน้ำเงินเฉพาะfont-bold แสดงถึงการทำให้ตัวอักษรหนา

การออกแบบ Responsive เป็น Tailwind คุณสมบัติอันทรงพลังอีกอย่างหนึ่งของมัน มันใช้กลยุทธ์แบบเคลื่อนที่เป็นหลัก ซึ่งหมายความว่าคลาสยูทิลิตี้ที่ไม่มีคำนำหน้า (เช่น text-sm) ทำงานในทุกขนาดหน้าจอ จากนั้นคุณสามารถกำหนดสไตล์ที่แตกต่างสำหรับหน้าจอที่ใหญ่ขึ้นโดยการเพิ่มคำนำหน้าที่ตอบสนองต่อการแสดงผล คำนำหน้าเหล่านี้ขึ้นอยู่กับชุดของจุดตัดที่สามารถกำหนดค่าได้ (ค่าเริ่มต้นคือ sm, md, lg, xl, 2xl）。

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

<div class="text-sm md:text-base lg:text-lg">
  <!-- 在小屏幕上字体大小为 small，中等屏幕为 base，大屏幕为 large -->
  ขนาดของข้อความนี้จะปรับเปลี่ยนตามขนาดหน้าจอ
</div>

ด้วยวิธีนี้ การสร้างเลย์เอาต์ที่ตอบสนองต่อการแสดงผลจะกลายเป็นเรื่องง่ายมาก:

<div class="flex flex-col md:flex-row">
  <div class="w-full md:w-1/3 p-4">เนื้อหาแถบด้านข้าง</div>
  <div class="w-full md:w-2/3 p-4">พื้นที่เนื้อหาหลัก</div>
</div>

การกำหนดค่าแบบกำหนดเองและการขยาย

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

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

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

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

เข้าชม Bluehost

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

กำหนดค่าแหล่งเนื้อหา: เพื่อตัดสไตล์ที่ไม่ได้ใช้ระหว่างการสร้างสำหรับการผลิตTailwind จำเป็นต้องรู้ว่าไฟล์ใดมี Tailwind คลาส กำหนดค่านี้ผ่านไฟล์การกำหนดค่า content ระบุฟิลด์

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,vue,jsx,tsx}'],
  // ... 其他配置
}

ใช้วงเล็บเหลี่ยมเพื่อรับค่าที่กำหนดเอง: เมื่อดีไซน์ต้องการค่าที่เฉพาะเจาะจงถึงระดับพิกเซล คุณไม่จำเป็นต้องกำหนดค่าทุกครั้งในไฟล์การกำหนดค่า สามารถใช้ไวยากรณ์วงเล็บเหลี่ยมเพื่อฝังค่าที่กำหนดเองได้ เช่น:top-[117px] 或 bg-[#bada55]สิ่งนี้ให้ความยืดหยุ่นอย่างมากสำหรับการนำดีไซน์ไปใช้อย่างรวดเร็ว

ผสานองค์ประกอบกับระบบนิเวศชุมชน

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

แนะนำให้อ่าน เชี่ยวชาญ Tailwind CSS: คู่มือการปฏิบัติและแนวทางปฏิบัติที่ดีที่สุดสำหรับการพัฒนา UI ที่ทันสมัยและมีประสิทธิภาพ。

// React 组件示例
function Button({ children, variant = 'primary' }) {
  const baseClasses = "px-4 py-2 rounded font-semibold transition duration-200";
  const variants = {
    primary: "bg-blue-600 hover:bg-blue-700 text-white",
    secondary: "bg-gray-200 hover:bg-gray-300 text-gray-800",
  };
  return (
    <button className={`${baseClasses} ${variants[variant]}`}>
      {children}
    </button>
  );
}

นอกจากนี้Tailwind มีระบบนิเวศชุมชนที่อุดมสมบูรณ์อย่างยิ่ง ประกอบด้วยปลั๊กอินทางการและบุคคลที่สามจำนวนมาก สำหรับเพิ่มตัวแปรของคลาสยูทิลิตี้ใหม่ (เช่น คอนเทนเนอร์ควอรี, สไตล์การพิมพ์) หรือการรวมไลบรารีคอมโพเนนต์ (เช่น Headless UI, Daisy UI) สำหรับสไตล์ที่กำหนดเองที่ซับซ้อน คุณยังสามารถใช้ใน CSS @apply คำสั่งจะดึงคลาสยูทิลิตี้ออกมาเป็นคลาส CSS ที่กำหนดเอง แต่แนะนำให้ใช้เฉพาะในกรณีที่จำเป็นเท่านั้น

.btn-custom {
  @apply px-4 py-2 font-bold rounded;
  background-color: theme(colors.brand-blue);
}

สรุป

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

โฮสติ้ง.com

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

เยี่ยมชมhosting.com

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

ทำไมคลาสยูทิลิตี้ถึงดีกว่า CSS แบบดั้งเดิม

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

คลาสยูทิลิตีจะทำให้โค้ด HTML ใหญ่เทอะทะหรือไม่

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

วิธีการปรับขนาดไฟล์ CSS ของโปรเจกต์ Tailwind ในสภาพแวดล้อมการผลิตให้เหมาะสม

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

Tailwind CSS เปรียบเทียบกับเฟรมเวิร์กอย่าง Bootstrap อย่างไร

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