Wind3 preset

Preset แบบครบครันสำหรับ Tailwind CSS / Windi CSS ใน UnoCSS

ซอร์สโค้ด

INFO

@unocss/preset-wind และ @unocss/preset-uno ถูกยกเลิกและเปลี่ยนชื่อเป็น @unocss/preset-wind3 preset นี้สืบทอดมาจาก @unocss/preset-mini

การติดตั้ง

pnpm

pnpm add -D @unocss/preset-wind3

yarn

yarn add -D @unocss/preset-wind3

npm

npm install -D @unocss/preset-wind3

bun

bun add -D @unocss/preset-wind3

import presetWind3 from '@unocss/preset-wind3'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
  ],
})

TIP

preset นี้รวมอยู่ในแพ็กเกจ unocss คุณสามารถนำเข้าจากที่นั่นได้เช่นกัน:

import { presetWind3 } from 'unocss'

กฎ

เป้าหมายหลักของ preset นี้คือการให้ความเข้ากันได้กับ Tailwind CSS และ Windi CSS โปรดทราบว่าอาจไม่รับประกันความเข้ากันได้อย่างสมบูรณ์ โปรดดูเอกสารของพวกเขาสำหรับการใช้งานโดยละเอียด

สำหรับกฎและ preset ทั้งหมดที่รวมอยู่ใน preset นี้ โปรดดูที่ เอกสารแบบโต้ตอบ ของเรา หรือไปที่ซอร์สโค้ดโดยตรง

คุณสมบัติ

โหมดมืด

โดยค่าเริ่มต้น preset นี้สร้างโหมดมืดแบบใช้คลาสด้วยตัวแปร dark:

<div class="dark:bg-red:10" />

จะสร้าง:

.dark .dark\:bg-red\:10 {
  background-color: rgb(248 113 113 / 0.1);
}

โหมดมืดแบบใช้ media query

หากต้องการใช้โหมดมืดแบบ media query ทั่วโลก คุณสามารถเปลี่ยนการกำหนดค่าสำหรับตัวแปร dark::

presetWind3({
  dark: 'media'
})

ตอนนี้

<div class="dark:bg-red:10" />

จะสร้าง:

@media (prefers-color-scheme: dark) {
  .dark\:bg-red\:10 {
    background-color: rgb(248 113 113 / 0.1);
  }
}

โหมดมืดแบบใช้ media query เมื่อต้องการ

หากต้องการใช้โหมดมืดแบบ media query เมื่อต้องการ คุณสามารถใช้ตัวแปร @dark::

<div class="@dark:bg-red:10" />

@media (prefers-color-scheme: dark) {
  .\@dark\:bg-red\:10 {
    background-color: rgb(248 113 113 / 0.1);
  }
}

ความแตกต่างจาก Tailwind CSS

การใช้ quote

การใช้ quote ในเทมเพลต (ไฟล์ที่ต้องการประมวลผล) ไม่ได้รับการสนับสนุนเนื่องจากวิธีการทำงานของ extractor เช่น คุณจะไม่สามารถเขียน before:content-[''] ได้ ในกรณีเหล่านี้ คุณอาจต้องการแนะนำ utility ใหม่ที่คุณสามารถตั้งค่าได้อย่างชัดเจน เช่น class="before:content-empty"

background-position ด้วยค่า arbitrary

Tailwind อนุญาตให้ใช้ค่ากำหนดเองสำหรับ background-position โดยใช้ไวยากรณ์แบบไม่มี prefix:

<div class="bg-[center_top_1rem]"></div>

Wind preset จะตีความ center_top_1rem เป็นสีแทน ให้ใช้ prefix position: เพื่อทำสิ่งเดียวกัน:

<div class="bg-[position:center_top_1rem]"></div>

แอนิเมชัน

Tailwind CSS มีแอนิเมชันในตัวน้อยกว่า เราสนับสนุนกฎแอนิเมชันของพวกเขาอย่างเต็มที่ และรวม Animate.css เข้าไว้ภายในเพื่อให้มีเอฟเฟกต์แอนิเมชันมากขึ้น

คุณสามารถใช้ prefix animate- เพื่อนำทาง IntelliSense ให้ค้นหาแอนิเมชันที่คุณต้องการได้อย่างรวดเร็ว

TIP

เราไม่รวมชื่อแอนิเมชันที่ขัดแย้งกันจาก Tailwind และ Animate.css หากคุณต้องการใช้ชื่อแอนิเมชันจาก Animate.css โปรดใช้ animate-<name>-alt

ตัวอย่างเช่น

Tailwind CSS	Animate.css
animate-bounce	animate-bounce-alt

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

export default defineConfig({
  theme: {
    animation: {
      keyframes: {
        custom: '{0%, 100% { transform: scale(0.5); } 50% { transform: scale(1); }}',
      },
      durations: {
        custom: '1s',
      },
      timingFns: {
        custom: 'cubic-bezier(0.4,0,.6,1)',
      },
      properties: {
        custom: { 'transform-origin': 'center' },
      },
      counts: {
        custom: 'infinite',
      },
    }
  }
})

ดูตัวอย่างแอนิเมชันที่กำหนดเอง:

animate-custom

TIP

คุณยังสามารถเพิ่ม category เพื่อจัดกลุ่มแอนิเมชันเพื่อการจัดการที่ดีขึ้น ซึ่งจะทำให้เครื่องมือ downstream ใช้เอฟเฟกต์แอนิเมชันได้ง่ายขึ้น

export default defineConfig({
  theme: {
    animation: {
      keyframes: {
        custom: '{0%, 100% { transform: scale(0.5); } 50% { transform: scale(1); }}',
      },
      // ...
      category: {
        custom: 'Zooming',
      },
    }
  }
})

ความแตกต่างจาก Windi CSS

Breakpoints

Windi CSS	UnoCSS
<sm:p-1	lt-sm:p-1
@lg:p-1	at-lg:p-1
>xl:p-1	xl:p-1

ช่องว่างในไวยากรณ์วงเล็บ

preset นี้ใช้ _ แทน , เพื่อเคารพช่องว่างในไวยากรณ์วงเล็บ

Windi CSS	UnoCSS
grid-cols-[1fr,10px,max-content]	grid-cols-[1fr_10px_max-content]

เนื่องจากกฎ CSS บางอย่างต้องการ , เป็นส่วนหนึ่งของค่า เช่น grid-cols-[repeat(3,auto)]

คุณสมบัติทดลอง

WARNING

preset นี้รวมคุณสมบัติทดลองที่อาจเปลี่ยนแปลงในลักษณะที่ไม่เข้ากันได้ในเวลาใดก็ได้

Media Hover

Media hover แก้ไขปัญหา hover ติดค้าง ที่การแตะเป้าหมายที่มีสไตล์ hover บนมือถือจะทำให้สไตล์ hover คงอยู่จนกว่าจะแตะที่อื่น

เนื่องจากสไตล์ :hover ปกติมีการใช้อย่างแพร่หลาย ตัวแปรจึงใช้ไวยากรณ์ @hover เพื่อแยกความแตกต่างจาก pseudo hover ปกติ

ตัวแปร @hover-text-red จะแสดงผล:

@media (hover: hover) and (pointer: fine) {
  .\@hover-text-red:hover {
    --un-text-opacity: 1;
    color: rgb(248 113 113 / var(--un-text-opacity));
  }
}

ตัวเลือก

INFO

ตัวเลือก preset นี้สืบทอดมาจาก @unocss/preset-mini

important

• ประเภท: boolean | string
• ค่าเริ่มต้น: false

ตัวเลือก important ให้คุณควบคุมว่า utility ของ UnoCSS ควรถูกทำเครื่องหมายด้วย !important หรือไม่ ซึ่งมีประโยชน์มากเมื่อใช้ UnoCSS กับ CSS ที่มีอยู่ซึ่งมีตัวเลือกที่มีความจำเพาะสูง

WARNING

การใช้ตัวเลือกนี้จะใช้ important กับ utility ทั้งหมดที่สร้างโดย UnoCSS คุณสามารถใช้ตัวแปร important: แทนหากคุณต้องการใช้กับ utility เฉพาะเท่านั้น

อย่างไรก็ตาม การตั้งค่า important เป็น true อาจทำให้เกิดปัญหาบางอย่างเมื่อรวมไลบรารี JS ของบุคคลที่สามที่เพิ่ม inline style ให้กับองค์ประกอบของคุณ ในกรณีเหล่านั้น utility !important ของ UnoCSS จะเอาชนะ inline style ซึ่งอาจทำลายการออกแบบที่คุณตั้งใจ

เพื่อหลีกเลี่ยงปัญหานี้ คุณสามารถตั้งค่า important เป็นตัวเลือก ID เช่น #app แทน:

import presetWind3 from '@unocss/preset-wind'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3({
      important: '#app',
    }),
  ],
})

การกำหนดค่านี้จะเพิ่ม prefix ตัวเลือกที่กำหนดให้กับ utility ทั้งหมดของคุณ ซึ่งเพิ่มความจำเพาะโดยไม่ต้องทำให้เป็น !important จริงๆ

utility dark:bg-blue จะแสดงผล:

#app :is(.dark .dark\:bg-blue) {
  --un-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--un-bg-opacity));
}