starlight-theme-nova 0.10.0 → 0.11.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "starlight-theme-nova",
   "type": "module",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "A beautiful theme for Astro Starlight",
   "author": "ocavue <ocavue@gmail.com>",
   "license": "MIT",
@@ -28,9 +28,9 @@
   "dependencies": {
     "@aria-ui/core": "^0.0.22",
     "@pagefind/default-ui": "^1.4.0",
-    "@shikijs/transformers": "^3.15.0",
-    "@shikijs/twoslash": "^3.15.0",
-    "@shikijs/types": "^3.15.0",
+    "@shikijs/transformers": "^3.21.0",
+    "@shikijs/twoslash": "^3.21.0",
+    "@shikijs/types": "^3.21.0",
     "@types/hast": "^3.0.4",
     "astro-theme-toggle": "^0.8.0",
     "hast-util-is-element": "^3.0.0",
@@ -47,21 +47,17 @@
     }
   },
   "devDependencies": {
-    "@astrojs/starlight": "^0.36.2",
-    "@iconify-json/bxl": "^1.2.2",
-    "@iconify-json/logos": "^1.2.10",
-    "@iconify-json/lucide": "^1.2.72",
-    "@iconify-json/tabler": "^1.2.23",
-    "@ocavue/tsconfig": "^0.5.0",
+    "@astrojs/starlight": "^0.37.2",
+    "@ocavue/tsconfig": "^0.6.2",
+    "@tailwindcss/cli": "^4.1.18",
+    "@tailwindcss/vite": "^4.1.18",
     "@types/node": "^20.17.30",
-    "@unocss/cli": "^66.5.5",
-    "astro": "^5.15.4",
-    "typescript": "^5.9.3",
-    "unocss": "^66.5.5",
-    "unocss-preset-animations": "^1.3.0"
+    "astro": "^5.16.8",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3"
   },
   "scripts": {
-    "dev": "unocss -w",
-    "build": "unocss"
+    "build": "pnpm run build:tailwindcss",
+    "build:tailwindcss": "tailwindcss -i ./lib/tailwind.css -o ./lib/tailwind.gen.css"
   }
 }

package/src/components/CodeCopy.astro

@@ -1,6 +1,6 @@
 <script>
-  const DEFAULT_HTML = /* html */ `<span class="nova-code-copy-button-icon-clipboard"></span>`
-  const SUCCESS_HTML = /* html */ `<span class="nova-code-copy-button-icon-check"></span>`
+  import ClipboardIcon from '../icons/lucide-clipboard.svg?raw'
+  import CheckIcon from '../icons/lucide-check.svg?raw'
 
   class CodeCopyButton extends HTMLElement {
     constructor() {
@@ -8,10 +8,12 @@
     }
 
     connectedCallback() {
-      this.innerHTML = DEFAULT_HTML
-
       const update = () => {
-        this.innerHTML = state === 'ready' ? DEFAULT_HTML : SUCCESS_HTML
+        const iconHtml = state === 'ready' ? ClipboardIcon : CheckIcon
+        this.innerHTML =
+          '<span class="w-full h-full block [&_svg]:w-full [&_svg]:h-full">' +
+          iconHtml +
+          '</span>'
       }
 
       let state: 'ready' | 'success' = 'ready'

package/src/components/CodeTabs.astro

@@ -20,10 +20,8 @@ const processedHtml = processCodeTabs(originalHtml)
 </div>
 
 <style is:global>
-  @layer nova {
+  @layer utilities {
     .sl-markdown-content .code-tabs {
-      overflow: hidden;
-
       &.code-tabs-border {
         border-color: var(--sl-color-gray-5);
         border-width: 1px;
@@ -31,17 +29,11 @@ const processedHtml = processCodeTabs(originalHtml)
         border-radius: 0.5rem;
       }
 
-      starlight-tabs {
-        margin-top: 0;
+      [role='tablist'] {
+        border-bottom-width: 1px;
       }
 
       .tablist-wrapper {
-        scrollbar-width: none;
-
-        [role='tablist'] {
-          border-bottom-width: 1px;
-        }
-
         [role='tab'] {
           font-family: var(--sl-font-system-mono);
           padding-top: 0.5rem;
@@ -50,13 +42,6 @@ const processedHtml = processCodeTabs(originalHtml)
           padding-right: 0.75rem;
           font-size: 0.875rem;
           white-space: nowrap;
-
-          border-bottom-style: solid;
-          border-bottom-width: 0px;
-
-          &[aria-selected='true'] {
-            border-bottom-width: 3px;
-          }
         }
       }
 
@@ -68,7 +53,7 @@ const processedHtml = processCodeTabs(originalHtml)
         border-radius: 0;
       }
 
-      .nova-code-container {
+      [data-nova-code-container] {
         border-radius: 0;
         border-width: 0;
         border-color: transparent;

package/src/components/Header.astro

@@ -16,30 +16,42 @@ const nav = options.nav ?? []
 const route = Astro.locals.starlightRoute
 ---
 
-<div class="nova-header">
-  <div class="nova-header-title">
+<div class="box-border flex h-full items-center gap-2">
+  <div
+    class:list={[
+      /* Prevent long titles overflowing and covering the search and menu buttons on narrow viewports. */
+      /* Avoid clipping focus ring around link inside title wrapper. */
+      '-m-3 overflow-clip p-3',
+      'flex min-w-0',
+    ]}
+  >
     <SiteTitle />
   </div>
-  <nav class="nova-header-nav">
+  <nav
+    class="flex flex-1 flex-row gap-4 overflow-x-auto py-3 pr-4 pl-4 text-sm font-medium max-md:**:hidden xl:gap-6 xl:pl-6"
+  >
     {
       nav.map((item) => (
-        <a class="nova-header-nav-link" href={getI18nText(item.href, route)}>
+        <a
+          class="-m-1.5 rounded-md p-1.5 text-(--sl-color-gray-3) no-underline hover:text-(--sl-color-white) focus-visible:outline-offset-0"
+          href={getI18nText(item.href, route)}
+        >
           {getI18nText(item.label, route)}
         </a>
       ))
     }
   </nav>
-  <div class="nova-header-search">
+  <div class="flex md:max-w-60 md:flex-1 print:hidden">
     <Search />
   </div>
-  <div class="nova-header-actions-lg">
+  <div class="hidden items-center gap-2 md:flex print:hidden">
     <SocialIcons />
     <LanguageSelect />
     <ThemeSelect />
   </div>
   {
     hasSidebar && (
-      <div class="nova-header-actions-sm">
+      <div class="flex items-center gap-2 md:hidden print:hidden">
         <MobileMenuToggle />
       </div>
     )

package/src/components/LinkButton.astro

@@ -19,15 +19,23 @@ const {
 } = Astro.props
 ---
 
-<span class="not-content">
+<span
+  class:list={[
+    'not-content',
+    'inline-flex items-center justify-center align-middle',
+  ]}
+>
   <a
     class:list={[
-      'nova-link-button not-content',
-      {
-        'nova-link-button-primary': variant === 'primary',
-        'nova-link-button-secondary': variant === 'secondary',
-        'nova-link-button-minimal': variant === 'minimal',
-      },
+      'not-content',
+      'group me-2 mt-2 mb-2 inline-flex items-center justify-between gap-2 rounded-xl border border-solid border-transparent px-6 py-3 font-medium no-underline transition active:scale-97',
+      variant === 'primary'
+        ? 'bg-black text-white shadow-sm hover:bg-gray-800 hover:shadow-md dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300'
+        : undefined,
+      variant === 'secondary'
+        ? 'border-(--sl-color-gray-5) bg-white text-gray-700 shadow-sm hover:bg-gray-50 hover:shadow-md dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
+        : undefined,
+      variant === 'minimal' ? 'text-gray-700 dark:text-gray-200' : undefined,
       className,
     ]}
     {...attrs}

package/src/components/LinkButtonIcon.astro

@@ -1,20 +1,22 @@
 ---
 import { Icon } from '@astrojs/starlight/components'
 import type { StarlightIcon } from '@astrojs/starlight/types'
+import ArrowRightIcon from '../icons/lucide-arrow-right.svg'
+import ArrowLeftIcon from '../icons/lucide-arrow-left.svg'
 
 interface Props {
   icon: StarlightIcon
 }
 
 const { icon } = Astro.props
-
-let className = ''
-
-if (icon === 'right-arrow') {
-  className = 'nova-link-button-icon-right'
-} else if (icon === 'left-arrow') {
-  className = 'nova-link-button-icon-left'
-}
 ---
 
-{className ? <div class={className} /> : <Icon name={icon} size="1.25rem" />}
+{
+  icon === 'right-arrow' ? (
+    <ArrowRightIcon class="block size-5 transition group-hover:translate-x-1" />
+  ) : icon === 'left-arrow' ? (
+    <ArrowLeftIcon class="block size-5 transition group-hover:-translate-x-1" />
+  ) : (
+    <Icon name={icon} size="1.25rem" />
+  )
+}

package/src/components/LinkCard.astro

@@ -1,5 +1,6 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
+import ArrowRightIcon from '../icons/lucide-arrow-right.svg'
 
 interface Props extends Omit<HTMLAttributes<'a'>, 'title'> {
   title: string
@@ -9,10 +10,23 @@ interface Props extends Omit<HTMLAttributes<'a'>, 'title'> {
 const { title, description, class: className, ...attributes } = Astro.props
 ---
 
-<div class:list={['nova-link-card not-content', className]}>
-  <a class="nova-link-card-link" {...attributes}>
+<div
+  class:list={[
+    'not-content',
+    'group relative flex flex-col gap-2 rounded-xl border border-solid border-(--sl-color-gray-5) bg-white px-5 py-4 text-gray-700 shadow-sm transition hover:bg-gray-50 hover:shadow-md active:scale-99 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700',
+    className,
+  ]}
+>
+  <a
+    class:list={[
+      'inline-flex items-center justify-between text-lg font-semibold text-gray-700 no-underline dark:text-gray-200',
+      /* a11y fix for https://github.com/withastro/starlight/issues/487 */
+      "before:absolute before:inset-0 before:content-['']",
+    ]}
+    {...attributes}
+  >
     <span set:html={title} />
-    <div class="nova-link-card-icon"></div>
+    <ArrowRightIcon class="ml-2 size-5 transition group-hover:translate-x-1" />
   </a>
   {description && <span set:html={description} />}
 </div>

package/src/components/MobileMenuFooter.astro

@@ -4,7 +4,7 @@ import SocialIcons from 'virtual:starlight/components/SocialIcons'
 import ThemeSelect from 'virtual:starlight/components/ThemeSelect'
 ---
 
-<div class="nova-mobile-menu-footer">
+<div class="flex items-center justify-end gap-2 py-4 print:hidden">
   <SocialIcons />
   <LanguageSelect />
   <ThemeSelect />

package/src/components/MobileMenuToggle.astro

@@ -1,9 +1,19 @@
+---
+import MenuIcon from '../icons/lucide-menu.svg'
+import XIcon from '../icons/lucide-x.svg'
+---
+
 <nova-mobile-menu-toggle
-  class="print:hidden nova-icon-button"
+  class="flex size-8 rounded-md p-2 text-(--sl-color-text) transition hover:bg-gray-400/30 focus-visible:outline-offset-1 active:scale-90 print:hidden"
   aria-label={Astro.locals.t('menuButton.accessibleLabel')}
   aria-controls="starlight__sidebar"
 >
-  <div class="nova-mobile-menu-toggle-icon"></div>
+  <div
+    class="transition-transform [body[data-mobile-menu-expanded]_&]:rotate-90"
+  >
+    <MenuIcon class="block [body[data-mobile-menu-expanded]_&]:hidden" />
+    <XIcon class="hidden [body[data-mobile-menu-expanded]_&]:block" />
+  </div>
 </nova-mobile-menu-toggle>
 
 <script>

package/src/components/MobileTableOfContents.astro

@@ -6,7 +6,7 @@ const { toc } = Astro.locals.starlightRoute
 
 {
   toc && (
-    <div class="nova-mobile-table-of-contents">
+    <div class="[&_nav]:backdrop-blur [&_summary]:border-b-(--sl-color-hairline)">
       <Default />
     </div>
   )

package/src/components/PageFrame.astro

@@ -2,8 +2,10 @@
 const { hasSidebar } = Astro.locals.starlightRoute
 ---
 
-<div class="nova-page-frame">
-  <header class="nova-page-frame-header">
+<div class="flex min-h-screen flex-col">
+  <header
+    class="fixed inset-0 z-(--sl-z-index-navbar) box-border h-(--sl-nav-height) w-full border-0 border-b border-solid border-(--sl-color-hairline) bg-(--sl-color-bg-nav) px-(--sl-nav-pad-x) py-(--sl-nav-pad-y) backdrop-blur"
+  >
     <slot name="header" />
   </header>
   {
@@ -15,9 +17,21 @@ const { hasSidebar } = Astro.locals.starlightRoute
       >
         <div
           id="starlight__sidebar"
-          class:list={['sidebar-pane', 'nova-page-frame-sidebar-pane']}
+          class:list={[
+            'nova-scroll-container',
+
+            'invisible md:visible [body[data-mobile-menu-expanded]_&]:max-md:visible',
+
+            'fixed top-(--sl-nav-height) bottom-0 left-0 z-(--sl-z-index-menu) overflow-y-auto border-0 border-solid border-(--sl-color-hairline) bg-(--sl-color-black) max-md:w-full md:w-(--sl-sidebar-width) md:border-r',
+          ]}
         >
-          <div class="sidebar-content sl-flex">
+          <div
+            class:list={[
+              // The class name `sidebar-content` is used here: https://github.com/withastro/starlight/blob/5387d33b9644900afd61651b8287503698cdb065/packages/starlight/user-components/Badge.astro#L77
+              'sidebar-content',
+              'flex h-full min-h-max flex-col px-(--sl-sidebar-pad-x) py-4',
+            ]}
+          >
             <slot name="sidebar" />
           </div>
         </div>
@@ -29,23 +43,6 @@ const { hasSidebar } = Astro.locals.starlightRoute
 
 <style>
   @layer nova {
-    .sidebar-pane {
-      position: fixed;
-      z-index: var(--sl-z-index-menu);
-      inset-block: var(--sl-nav-height) 0;
-      inset-inline-start: 0;
-      background-color: var(--sl-color-black);
-      overflow-y: auto;
-    }
-
-    .sidebar-content {
-      height: 100%;
-      min-height: max-content;
-      padding: 1rem var(--sl-sidebar-pad-x) 1rem;
-      flex-direction: column;
-      gap: 1rem;
-    }
-
     .main-frame {
       padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
       padding-inline-start: var(--sl-content-inline-start);

package/src/components/Pagination.astro

@@ -6,7 +6,10 @@ const { prev, next } = pagination
 const isRtl = dir === 'rtl'
 ---
 
-<div class="print:hidden nova-pagination" dir={dir}>
+<div
+  class="flex min-w-full flex-row items-stretch justify-between gap-2 px-1 pt-0 pb-6 print:hidden"
+  dir={dir}
+>
   {
     prev && (
       <PaginationLink
@@ -17,7 +20,7 @@ const isRtl = dir === 'rtl'
       />
     )
   }
-  <div class="nova-pagination-divider"></div>
+  <div class="flex-1"></div>
   {
     next && (
       <PaginationLink

package/src/components/PaginationLink.astro

@@ -1,4 +1,7 @@
 ---
+import ChevronRightIcon from '../icons/lucide-chevron-right.svg'
+import ChevronLeftIcon from '../icons/lucide-chevron-left.svg'
+
 interface Props {
   label: string
   href: string
@@ -9,13 +12,19 @@ interface Props {
 const { label, href, rel, side } = Astro.props
 ---
 
-<a href={href} rel={rel} data-side={side} class:list={['nova-pagination-link']}>
+<a
+  href={href}
+  rel={rel}
+  data-side={side}
+  class="group m-0 flex items-center justify-end gap-2 rounded-xl p-2 font-medium text-(--sl-color-gray-2) no-underline transition hover:text-(--sl-color-white) md:text-lg [[rel='next']]:flex-row [[rel='prev']]:flex-row-reverse"
+>
   <span>{label}</span>
-  <span
-    class:list={[
-      'nova-pagination-link-icon',
-      side === 'right'
-        ? 'nova-pagination-link-icon-right'
-        : 'nova-pagination-link-icon-left',
-    ]}></span>
+
+  {
+    side === 'right' ? (
+      <ChevronRightIcon class="block min-h-5 min-w-5 transition group-hover:translate-x-1" />
+    ) : (
+      <ChevronLeftIcon class="block min-h-5 min-w-5 transition group-hover:-translate-x-1" />
+    )
+  }
 </a>

package/src/components/Search.astro

@@ -1,5 +1,6 @@
 ---
 import project from 'virtual:starlight/project-context'
+import SearchIcon from '../icons/lucide-search.svg'
 
 const pagefindTranslations = {
   placeholder: Astro.locals.t('search.label'),
@@ -19,13 +20,13 @@ if (project.trailingSlash === 'never')
 
 <site-search class={Astro.props.class} {...dataAttributes}>
   <button
-    class="nova-search-button"
+    class="flex size-8 rounded-md p-2 text-(--sl-color-text) transition hover:bg-gray-400/30 focus-visible:outline-offset-1 active:scale-90 md:h-9 md:w-full md:max-w-88 md:rounded-md md:border md:border-solid md:border-(--sl-color-gray-5) md:p-2 md:text-(--sl-color-text) md:transition-colors md:hover:bg-gray-400/10"
     data-open-modal
     disabled
     aria-label={Astro.locals.t('search.label')}
     aria-keyshortcuts="Control+K"
   >
-    <span class="nova-search-button-icon"></span>
+    <SearchIcon class="size-4" />
     <span class="sl-hidden md:sl-block" aria-hidden="true"
       >{Astro.locals.t('search.label')}</span
     >

package/src/components/SiteTitle.astro

@@ -2,4 +2,8 @@
 import Default from '@astrojs/starlight/components/SiteTitle.astro'
 ---
 
-<span class="nova-site-title"><Default /></span>
+<span
+  class="-m-1.5 rounded-md p-1.5 **:text-lg **:font-semibold **:text-(--sl-color-text) focus-visible:outline-offset-0"
+>
+  <Default />
+</span>

package/src/components/SocialIcons.astro

@@ -17,7 +17,11 @@ if (!Array.isArray(links)) {
   links.length > 0 && (
     <>
       {links.map(({ label, href, icon }) => (
-        <a href={href} rel="me" class="nova-icon-button">
+        <a
+          href={href}
+          rel="me"
+          class="flex size-8 rounded-md p-2 text-(--sl-color-text) transition hover:bg-gray-400/30 focus-visible:outline-offset-1 active:scale-90"
+        >
           <span class="sr-only">{label}</span>
           <Icon name={icon} size="1rem" color="currentColor" />
         </a>

package/src/components/ThemeSelect.astro

@@ -1,14 +1,18 @@
 ---
 import { Toggle } from 'astro-theme-toggle/components'
+import MoonIcon from '../icons/tabler-moon-filled.svg'
+import SunIcon from '../icons/tabler-sun-high-filled.svg'
 ---
 
-<div class="nova-theme-select">
-  <Toggle class="nova-icon-button">
+<div class="size-8 overflow-visible">
+  <Toggle
+    class="flex size-8 rounded-md p-2 text-(--sl-color-text) transition hover:bg-gray-400/30 focus-visible:outline-offset-1 active:scale-90"
+  >
     <Fragment slot="icon-light">
-      <div class="nova-theme-select-icon-light"></div>
+      <SunIcon class="size-4" />
     </Fragment>
     <Fragment slot="icon-dark">
-      <div class="nova-theme-select-icon-dark"></div>
+      <MoonIcon class="size-4" />
     </Fragment>
   </Toggle>
 </div>

package/src/constants.ts

@@ -1,5 +1,7 @@
 export const PAGE_TITLE_ID = '_top'
 
+// data-nova-code-container
 export const CODE_PROPERTY_CONTAINER = 'dataNovaCodeContainer'
 
+// data-nova-code-title
 export const CODE_PROPERTY_TITLE = 'dataNovaCodeTitle'

package/src/icons/lucide-arrow-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m12 19l-7-7l7-7m7 7H5"/></svg>

package/src/icons/lucide-arrow-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7l7 7l-7 7"/></svg>

package/src/icons/lucide-check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"/></svg>

package/src/icons/lucide-chevron-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 18l-6-6l6-6"/></svg>

package/src/icons/lucide-chevron-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"/></svg>

package/src/icons/lucide-clipboard.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE --><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></g></svg>

package/src/icons/lucide-menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5h16M4 12h16M4 19h16"/></svg>

package/src/icons/lucide-search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE --><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m21 21l-4.34-4.34"/><circle cx="11" cy="11" r="8"/></g></svg>

package/src/icons/lucide-x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"/></svg>

package/src/icons/tabler-moon-filled.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE --><path fill="currentColor" d="M12 1.992a10 10 0 1 0 9.236 13.838c.341-.82-.476-1.644-1.298-1.31a6.5 6.5 0 0 1-6.864-10.787l.077-.08c.551-.63.113-1.653-.758-1.653h-.266l-.068-.006z"/></svg>

package/src/icons/tabler-sun-high-filled.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE --><path fill="currentColor" d="M12 19a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1m-4.95-2.05a1 1 0 0 1 0 1.414l-1.414 1.414a1 1 0 1 1-1.414-1.414l1.414-1.414a1 1 0 0 1 1.414 0m11.314 0l1.414 1.414a1 1 0 0 1-1.414 1.414l-1.414-1.414a1 1 0 0 1 1.414-1.414m-5.049-9.836a5 5 0 1 1-2.532 9.674a5 5 0 0 1 2.532-9.674M4 11a1 1 0 0 1 0 2H2a1 1 0 0 1 0-2zm18 0a1 1 0 0 1 0 2h-2a1 1 0 0 1 0-2zM5.636 4.222L7.05 5.636A1 1 0 0 1 5.636 7.05L4.222 5.636a1 1 0 0 1 1.414-1.414m14.142 0a1 1 0 0 1 0 1.414L18.364 7.05a1 1 0 0 1-1.414-1.414l1.414-1.414a1 1 0 0 1 1.414 0M12 1a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0V2a1 1 0 0 1 1-1"/></svg>

package/src/index.ts

@@ -1,7 +1,9 @@
 import type {
+  StarlightConfig,
   StarlightPlugin,
   StarlightUserConfig,
 } from '@astrojs/starlight/types'
+import type { AstroConfig } from 'astro'
 import remarkCustomHeaderId from 'remark-custom-header-id'
 
 import { createShikiConfig } from './shiki-config'
@@ -25,7 +27,7 @@ const components = {
     'starlight-theme-nova/components/MobileTableOfContents.astro',
   MobileMenuFooter: 'starlight-theme-nova/components/MobileMenuFooter.astro',
   LanguageSelect: 'starlight-theme-nova/components/LanguageSelect.astro',
-} as const
+} as const satisfies Partial<StarlightConfig['components']>
 
 export type { ThemeNovaOptions }
 
@@ -35,13 +37,29 @@ export default function starlightThemeNova(
   return {
     name: 'starlight-theme-nova',
     hooks: {
-      setup({ config, updateConfig, addIntegration, astroConfig }) {
+      setup: async ({ config, updateConfig, addIntegration, astroConfig }) => {
+        let useTailwind: boolean
+
+        if (options.stylingSystem === 'css') {
+          useTailwind = false
+        } else if (options.stylingSystem === 'tailwind') {
+          useTailwind = true
+        } else {
+          const hasTailwindcss = await checkHasTailwindcss(
+            astroConfig.vite?.plugins,
+          )
+          useTailwind = hasTailwindcss
+        }
+
         const newConfig = {
           customCss: [
             ...(config.customCss || []),
             // Including nova styles *after* any user CSS, so that @layer nova
             // can have a higher precedence.
             'starlight-theme-nova/styles.css',
+            useTailwind
+              ? 'starlight-theme-nova/tailwind.css'
+              : 'starlight-theme-nova/tailwind.gen.css',
           ],
           components: {
             // Including any user components *after* our own.
@@ -78,3 +96,26 @@ export default function starlightThemeNova(
     },
   }
 }
+
+type ViteUserConfig = AstroConfig['vite']
+type VitePlugin = NonNullable<ViteUserConfig['plugins']>[number]
+
+async function checkHasTailwindcss(
+  plugin: VitePlugin | Promise<VitePlugin>,
+): Promise<boolean> {
+  const awaited = await plugin
+
+  if (!awaited) {
+    return false
+  }
+  if (Array.isArray(awaited)) {
+    for (const p of awaited) {
+      if (await checkHasTailwindcss(p)) {
+        return true
+      }
+    }
+    return false
+  }
+  let name = awaited.name || ''
+  return name.includes('tailwind')
+}