Slidev

Configurar Windi CSS

Ambiente: node
Esta função de configuração só será executada no ambiente Node.js, você pode ter acesso a API do Node.

O Markdown suporta naturalmente tags HTML embutidas. Portanto, você pode estilizar seu conteúdo como preferir. Para oferecer certa comodidade, nós temos o Windi CSS embutido, para que você possa estilizar o conteúdo diretamente usando classes.

Por exemplo:

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

### Nome

- Item 1
- Item 2

</div>

O Attributify Mode no Windi CSS v3.0 é habilitado por padrão.

Configurações

Para configurar o Windi CSS, crie o arquivo setup/windicss.ts com o seguinte conteúdo para estender as configurações existentes:

// setup/windicss.ts

import { defineWindiSetup } from '@slidev/types'

// extenddendo a configuração existente do windicss
export default defineWindiSetup(() => ({
  shortcuts: {
    // plano de fundo padrão customizado
    'bg-main': 'bg-white text-[#181818] dark:bg-[#121212] dark:text-[#ddd]',
  },
  theme: {
    extend: {
      // fontes podem ser substituídas aqui, lembre-se de atualizar os links de fontes da web no `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',
      },
    },
  },
}))

Saiba mais sobre as configurações do Windi CSS.