Pular para o conteúdo principal

Tailwind CSS

Este documento descreve o sistema de estilos do tema, baseado em Tailwind CSS v4.

Visão geral​

O tema utiliza Tailwind CSS v4 como framework CSS utilitário. O Tailwind é compilado a partir de arquivos fonte organizados em partials, permitindo manutenção modular.

Estrutura de arquivos​

asset/styles/
├── input.css              # Entry point: importa Tailwind e partials
├── partials.css          # Importador de todos os partials
└── partials/             # Partials CSS organizados por funcionalidade
    ├── _base.css         # Estilos base, variáveis, tipografia
    ├── _navigation.css   # Navegação e paginação
    ├── _browse.css       # Páginas de listagem
    ├── _show.css         # Páginas de exibição
    ├── _advanced-search.css # Busca avançada
    ├── _pages.css        # Blocos de página e alinhamentos
    ├── _search.css       # Página de busca
    ├── _containers.css   # Containers e layout
    ├── _lightbox.css     # Estilos do lightGallery
    ├── _header.css       # Header: não importado por partials.css
    └── _home.css         # Home: não importado por partials.css

Arquivos _header.css e _home.css existem mas não são importados por partials.css. Estão disponíveis para uso futuro mas não afetam o build atual.

Entry point​

Arquivo asset/styles/input.css importa Tailwind CSS e os partials:

@import "tailwindcss";
@import "./partials.css";

Tailwind v4 usa @import ao invés de diretivas @tailwind.

Partials​

Arquivo asset/styles/partials.css importa todos os partials CSS ativos:

@import "./partials/_base.css";
@import "./partials/_navigation.css";
@import "./partials/_browse.css";
@import "./partials/_show.css";
@import "./partials/_advanced-search.css";
@import "./partials/_pages.css";
@import "./partials/_search.css";
@import "./partials/_containers.css";
@import "./partials/_lightbox.css";

Partials _header.css e _home.css são excluídos deste importador.

Variáveis CSS​

Arquivo partials/_base.css define variáveis no bloco @theme:

@theme {
  --color-primary: #000;
  --color-secondary: #fff;
  --font-size-base: 16px;
  --line-height-base: 24px;
  --spacing-s: 6px;
  --spacing-m: 12px;
  --spacing-l: 24px;
  --font-body: "Inter", sans-serif;
}

Estas variáveis são usadas por utilitários do Tailwind e estilos customizados.

Variável dinâmica de tema​

Cor de destaque configurável via themeSetting('accent_color') é gerada em view/common/theme-setting-css.phtml:

:root {
    --theme-accent-color: #valor;
}

Esta variável é aplicada a links, botões, e elementos destacados. O valor vem do painel administrativo em Aparência e Configurações do tema.

Build e compilação​

Scripts definidos em package.json:

{
  "scripts": {
    "dev": "npx @tailwindcss/cli -i ./asset/styles/input.css -o ./asset/output.css --watch",
    "build:css": "npx @tailwindcss/cli -i ./asset/styles/input.css -o ./output.css --minify"
  }
}

Desenvolvimento​

Comando npm run dev compila CSS em modo watch:

  • Input: asset/styles/input.css
  • Output: asset/output.css: caminho correto
  • Recompila ao salvar arquivos fonte

Produção​

Comando npm run build:css compila e minifica CSS:

  • Input: asset/styles/input.css
  • Output: ./output.css: caminho incorreto

Atenção: caminho de saída do build​

O script build:css emite para ./output.css na raiz do tema, mas o tema carrega asset/output.css. O script dev emite corretamente para asset/output.css. Após executar npm run build:css, copie o arquivo manualmente:

cp output.css asset/output.css

O arquivo asset/output.css é carregado no layout.phtml:

$this->headLink()->prependStylesheet($this->assetUrl('output.css'));

Fontes​

Google Fonts são carregadas no layout.phtml:

  • Inter: fonte principal do tema
  • Material Symbols Outlined: ícones

Font Awesome é carregado via asset/css/font-awesome/font-awesome.css do Omeka S.

Customizações​

Adicionar novo partial​

Crie o arquivo em asset/styles/partials/_novo.css e adicione o import em partials.css:

@import "./partials/_novo.css";

Recompile o CSS para incluir no output.

Modificar variáveis​

Edite o bloco @theme em _base.css com novos valores. Variáveis de cor, espaçamento, e tipografia afetam todo o sistema de estilos.

Adicionar estilos customizados​

Use @layer para organizar estilos:

@layer base {
  /* Estilos base */
}

@layer components {
  /* Componentes */
}

@layer utilities {
  /* Utilities */
}