Softonic

CSS เป็น Tailwind

ขั้นตอน 1 / 2
แปลงเป็น Tailwind

การย้ายสไตล์ชีตเดิมไปยัง Tailwind ทีละกฎนั้นน่าเบื่อ เครื่องมือแปลงนี้จะรับบล็อก CSS ธรรมดา ไม่ว่าจะมีหรือไม่มีตัวเลือกและวงเล็บปีกกา แล้วเขียนการประกาศแต่ละรายการใหม่ให้เป็นยูทิลิตีของ Tailwind คู่ที่รู้จักจะถูกแมปไปยังยูทิลิตีที่มีชื่อ เช่น flex, items-center หรือ rounded-lg ส่วนอื่น ๆ ทั้งหมดจะถอยไปใช้ไวยากรณ์ค่าแบบกำหนดเองของ Tailwind คือ [property:value] ดังนั้นจึงไม่มีสิ่งใดถูกตัดทิ้งไปอย่างเงียบ ๆ

เครื่องมือแปลงประมวลผล CSS ของคุณอย่างไร

  1. 1

    วาง CSS

    วางกฎแบบเต็ม เช่น `.card { padding: 16px; border-radius: 8px; }` หรือเฉพาะการประกาศที่อยู่ภายในวงเล็บปีกกาก็ได้

  2. 2

    ตัวแยกวิเคราะห์ลบความคิดเห็นออก

    ความคิดเห็นแบบบล็อก `/* ... */` จะถูกลบออกก่อนที่การประกาศจะถูกแยกด้วยเครื่องหมายอัฒภาค

  3. 3

    การประกาศแต่ละรายการจะถูกแมป

    คุณสมบัติทั่วไปจะถูกแมปไปยังยูทิลิตีจริงของ Tailwind (ระยะห่าง, รัศมีมุม, ขนาดฟอนต์, flex, display, text-align) ส่วนคุณสมบัติที่ไม่รู้จักจะถอยไปใช้ `[prop:value]`

  4. 4

    คัดลอกและนำไปใช้

    วางรายการคลาสลงในแอตทริบิวต์ `class` ขององค์ประกอบ HTML ที่ตรงกัน

สิ่งที่ถูกแมปไปยังยูทิลิตีที่มีชื่อ

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

การแมปโดยตรง

การประกาศ CSS ยูทิลิตี Tailwind
display: flex flex
display: grid grid
display: none hidden
justify-content: center justify-center
align-items: center items-center
text-align: center text-center
font-weight: bold font-bold
cursor: pointer cursor-pointer
overflow: hidden overflow-hidden

การแมปที่คำนึงถึงสเกล

padding, margin, ความกว้าง, ความสูง และมิติต่ำสุด/สูงสุด ล้วนนำค่าพิกเซลมาหารด้วย 4 เพื่อสร้างระดับระยะห่างของ Tailwind เช่น padding: 16px จะกลายเป็น p-4 และ width: 32px จะกลายเป็น w-8 ค่าที่ไม่ลงตัวกับระดับที่ชัดเจนจะถอยไปใช้ค่าแบบกำหนดเองบนยูทิลิตีที่สอดคล้องกัน เช่น width: 37px จะกลายเป็น w-[37px]

border-radius จะถูกแมปไปยังยูทิลิตีที่มีชื่อซึ่งใกล้เคียงที่สุด (rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl) ขนาดที่เกิน 16px จะกลายเป็น rounded-full ซึ่งสะดวกสำหรับองค์ประกอบทรงแคปซูล (pill) แต่ไม่ถูกต้องสำหรับรัศมีที่ใหญ่ผิดปกติ โปรดตรวจสอบผลลัพธ์ก่อนนำขึ้นใช้งานจริง

font-size จะถูกจัดกลุ่มตั้งแต่ text-xs ไปจนถึง text-3xl ตามเกณฑ์ค่าพิกเซล

ข้อควรระวัง

  • ซูโดคลาส, มีเดียเควรี และตัวเลือกจะไม่ถูกแปลง มีเพียงการประกาศที่อยู่ภายในวงเล็บปีกกาเท่านั้นที่ถูกแปลง คุณยังต้องเพิ่มตัวแปรอย่าง hover: หรือ md: ด้วยตัวเองอยู่ดี
  • สีจะกลายเป็นค่าแบบกำหนดเอง เช่น text-[#1f2937] เพราะเครื่องมือแปลงไม่ทราบพาเลตต์ธีม Tailwind ของคุณ โปรดเปลี่ยนเป็น text-gray-800 หรือโทเคนที่คุณกำหนดเองด้วยตนเอง
  • คุณสมบัติแบบย่อที่คุณไม่ค่อยได้ใช้ (border, background, transition) จะถูกแสดงตามตัวอักษรเป็น [property:value] โปรดตรวจสอบก่อนนำขึ้นใช้งานจริง

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

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

เครื่องมือแปลงไม่สามารถมองเห็นสเกลสีใน tailwind.config.js ของคุณ จึงแสดงสีเป็นค่าแบบกำหนดเองบนยูทิลิตีที่สอดคล้องกัน (text-[#1f2937]) โปรดแมปไปยังโทเคนพาเลตต์ที่ใกล้เคียงที่สุดด้วยตนเอง เช่น text-gray-800 หรือโทเคนแบรนด์ที่คุณกำหนดไว้

ได้, วางหลายกฎเข้าไป เครื่องมือจะสร้างรายการคลาสหนึ่งรายการต่อหนึ่งตัวเลือก โดยคั่นด้วยความคิดเห็น /* selector */ เพื่อให้คุณจัดให้ตรงกับ HTML ที่สอดคล้องกันได้

CSS จะถูกส่งไปยังเซิร์ฟเวอร์ของเราเพื่อให้เครื่องมือแปลงเปลี่ยนเป็นคลาส Tailwind ข้อมูลจะไม่ถูกจัดเก็บและไม่ถูกเพิ่มลงในลิงก์ของหน้า

เครื่องมือที่เกี่ยวข้อง

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

เครื่องสร้างตัวอักษรสุ่ม

สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน

ตัวลดรูปพีชคณิตบูลีน

ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^

เครื่องมือสร้าง EditorConfig

สร้างไฟล์ .editorconfig ด้วยกฎสไตล์และขนาดการเยื้อง การจบบรรทัด ชุดอักขระ และช่องว่างของคุณ เพื่อให้การจัดรูปแบบสอดคล้องกันในทุก IDE และโปรแกรมแก้ไข

เครื่องมือนี้มีให้บริการในภาษาอื่น