Cấu hình Windi CSS

Môi trường: node

Hàm cài đặt này sẽ chỉ chạy trên môi trường Node.js, bạn có thể có quyền truy cập vào API của Node.

Markdown hỗ trợ các thẻ HTML được nhúng một cách tự nhiên. Do đó, bạn có thể tạo nội dung của mình theo cách bạn muốn. Để mang lại sự tiện lợi, chúng tôi đã tích hợp sẵn Windi CSS built-in, vì vậy bạn có thể tạo thẻ HTML trực tiếp bằng các class.

Ví dụ:

<div class="grid pt-4 gap-4 grids-cols-[100px,1fr]">

### Name

- Item 1
- Item 2

</div>

Attributify Mode trong Windi CSS v3.0 mặc định được bật.

Cấu hình

Để định cấu hình CSS Windi, hãy tạo setup/windicss.ts ới nội dung sau để mở rộng cấu hình tích hợp

// setup/windicss.ts

import { defineWindiSetup } from '@slidev/types'

// extending the builtin windicss configurations
export default defineWindiSetup(() => ({
  shortcuts: {
    // custom the default background
    'bg-main': 'bg-white text-[#181818] dark:bg-[#121212] dark:text-[#ddd]',
  },
  theme: {
    extend: {
      // fonts can be replaced here, remember to update the web font links in `index.html`
      fontFamily: {
        sans: 'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
        mono: '"Fira Code", monospace',
      },
    },
  },
}))

Tìm hiểu thêm về: Cấu hình Windi CSS

# Cấu hình Windi CSS

# Cấu hình

Cấu hình Windi CSS

Cấu hình