julien/andon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): wire tailwind v4 and daisyui theme into nuxt

Browse Source 
Tailwind v4 integrates as a Vite plugin and configures daisyui via the
CSS @plugin directive; the light theme is selected with data-theme on
<html>. Heading font sizes are re-asserted because Tailwind's preflight
resets them, which would otherwise shrink the hand-crafted headings.
This commit is contained in:
Julien Calixte
2026-05-27 23:46:12 +02:00
parent e2e6b95e7c
commit 762d912243
2 changed files with 36 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/assets/css/main.css
View File

@@ -1,5 +1,12 @@
@import "tailwindcss";
@plugin "daisyui" {
themes: light --default;
}
/* Headings use Playfair Display (loaded via the coollabs fonts API in /* Headings use Playfair Display (loaded via the coollabs fonts API in
nuxt.config). The board supplies its own Cutive Mono for section labels. */ nuxt.config). The board supplies its own Cutive Mono for section labels.
Tailwind's preflight resets heading font-size/weight to inherit, so we
re-assert the hand-crafted sizes here to preserve the prior look. */
h1, h1,
h2, h2,
h3, h3,
@@ -7,4 +14,24 @@ h4,
h5, h5,
h6 { h6 {
font-family: 'Playfair Display', Georgia, serif; font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.25em;
}
h4 {
font-size: 1em;
}
h5 {
font-size: 0.875em;
}
h6 {
font-size: 0.75em;
} }

8
nuxt.config.ts
View File

@@ -1,11 +1,19 @@
// https://nuxt.com/docs/api/configuration/nuxt-config // https://nuxt.com/docs/api/configuration/nuxt-config
import tailwindcss from '@tailwindcss/vite'
export default defineNuxtConfig({ export default defineNuxtConfig({
compatibilityDate: '2025-07-15', compatibilityDate: '2025-07-15',
devtools: { enabled: true }, devtools: { enabled: true },
modules: ['@nuxt/eslint', '@nuxt/test-utils/module'], modules: ['@nuxt/eslint', '@nuxt/test-utils/module'],
css: ['~/assets/css/main.css'], css: ['~/assets/css/main.css'],
// Tailwind v4 integrates as a Vite plugin (no @nuxtjs/tailwindcss module).
vite: {
plugins: [tailwindcss()],
},
app: { app: {
head: { head: {
// DaisyUI theme is selected via data-theme on the root element.
htmlAttrs: { 'data-theme': 'light' },
link: [ link: [
{ rel: 'preconnect', href: 'https://api.fonts.coollabs.io' }, { rel: 'preconnect', href: 'https://api.fonts.coollabs.io' },
{ {