resources

CDN resources and headers for daisyUI and Tailwind CSS

Core CDN Resources

The library provides pre-configured CDN headers for daisyUI v5 and Tailwind CSS v4:

---

source

get_daisyui_headers

 get_daisyui_headers (include_themes:bool=True)

Get the standard daisyUI and Tailwind CSS CDN headers.

	Type	Default	Details
include_themes	bool	True	Include the daisyUI themes CSS file
Returns	List		List of Link and Script elements for daisyUI and Tailwind CSS

get_daisyui_headers()

[link((),{'rel': 'stylesheet', 'href': 'https://cdn.jsdelivr.net/npm/daisyui@5', 'type': 'text/css'}),
 link((),{'rel': 'stylesheet', 'href': 'https://cdn.jsdelivr.net/npm/daisyui@5/themes.css', 'type': 'text/css'}),
 link((),{'rel': 'stylesheet', 'href': 'https://cdn.jsdelivr.net/npm/daisyui@5/colors/properties.css', 'type': 'text/css'}),
 link((),{'rel': 'stylesheet', 'href': 'https://cdn.jsdelivr.net/npm/daisyui@5/colors/properties-extended.css', 'type': 'text/css'}),
 [script(('',),{'src': 'https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4'})]]

Example usage:

# Get all headers including themes
headers = get_daisyui_headers()
print(f"Number of headers: {len(headers)}")
for h in headers:
    print(h)

Number of headers: 5
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5" type="text/css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" type="text/css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5/colors/properties.css" type="text/css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5/colors/properties-extended.css" type="text/css">
[script(('',),{'src': 'https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4'})]

# Get headers without themes (for custom theme usage)
headers_no_themes = get_daisyui_headers(include_themes=False)
print(f"Number of headers without themes: {len(headers_no_themes)}")
for h in headers_no_themes:
    print(h)

Number of headers without themes: 4
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5" type="text/css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5/colors/properties.css" type="text/css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5/colors/properties-extended.css" type="text/css">
[script(('',),{'src': 'https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4'})]

Custom Resources

For adding custom CSS files, JavaScript libraries, or local theme files:

---

source

create_css_link

 create_css_link (href:str, media:Optional[str]=None,
                  crossorigin:Optional[Literal['anonymous','use-
                  credentials']]=None)

Create a CSS link element with optional attributes.

	Type	Default	Details
href	str		URL or path to CSS file
media	Optional	None	Media query (e.g., “screen”, “print”)
crossorigin	Optional	None
Returns	functools.partial(<function ft_hx at 0x7f99fd89c2c0>, ‘link’)		Link element for CSS stylesheet

---

source

create_js_script

 create_js_script (src:str, async_:bool=False, defer:bool=False,
                   module:bool=False,
                   crossorigin:Optional[Literal['anonymous','use-
                   credentials']]=None)

Create a JavaScript script element with optional attributes.

	Type	Default	Details
src	str		URL or path to JavaScript file
async_	bool	False	Load script asynchronously
defer	bool	False	Defer script execution
module	bool	False	ES6 module
crossorigin	Optional	None
Returns	Script		Script element for JavaScript file

Combined Header Builder

A comprehensive function to build all headers with custom resources:

---

source

build_headers

 build_headers (include_themes:bool=True, custom_css:Optional[List[Union[s
                tr,functools.partial(<functionft_hxat0x7f99fd89c2c0>,'link
                ')]]]=None,
                custom_js:Optional[List[Union[str,Script]]]=None,
                custom_theme_css:Optional[str]=None, custom_theme_paths:Op
                tional[List[Union[str,pathlib.Path]]]=None)

*Build a complete set of headers for a FastHTML app with daisyUI and Tailwind.

The order of headers is: 1. daisyUI CSS 2. daisyUI themes CSS (if included) 3. Custom theme CSS (if provided as string) 4. Custom theme CSS files (if provided as Path objects) 5. Custom CSS files 6. Tailwind CSS JavaScript 7. Custom JavaScript files*

	Type	Default	Details
include_themes	bool	True	Include daisyUI themes
custom_css	Optional	None	Additional CSS files
custom_js	Optional	None	Additional JS files
custom_theme_css	Optional	None	Custom theme CSS as a string
custom_theme_paths	Optional	None	List of paths to custom theme CSS files
Returns	List		List of Link, Script, and Style elements for complete app headers

Example with custom resources:

# Build headers with custom resources
from nbdev.config import get_config
cfg = get_config()
project_dir = cfg.config_path

custom_headers = build_headers(
    include_themes=True,
    custom_css=[
        "/static/custom.css",
        "https://cdn.example.com/fonts.css"
    ],
    custom_js=[
        create_js_script("/static/app.js", defer=True),
        "https://cdn.example.com/analytics.js"
    ],
    custom_theme_paths=[project_dir / "css" / "custom_light_theme.css"]
)

print(f"Total headers: {len(custom_headers)}")
for i, h in enumerate(custom_headers):
    print(f"{i+1}. {h}")

Total headers: 9
1. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5" type="text/css">
2. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5/colors/properties-extended.css" type="text/css">
3. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" type="text/css">
4. <style>:root:has(input.theme-controller[value=custom_light_theme]:checked),[data-theme="custom_light_theme"] {
  color-scheme: light;
  --color-base-100: oklch(98% 0.005 220);
  --color-base-200: oklch(96% 0.008 215);
  --color-base-300: oklch(92% 0.012 210);
  --color-base-content: oklch(18% 0.015 230);
  --color-primary: oklch(55% 0.18 260);
  --color-primary-content: oklch(98% 0.005 260);
  --color-secondary: oklch(45% 0.12 340);
  --color-secondary-content: oklch(98% 0.005 340);
  --color-accent: oklch(65% 0.15 180);
  --color-accent-content: oklch(15% 0.01 180);
  --color-neutral: oklch(25% 0.01 240);
  --color-neutral-content: oklch(95% 0.005 240);
  --color-info: oklch(60% 0.16 230);
  --color-info-content: oklch(98% 0.005 230);
  --color-success: oklch(58% 0.14 150);
  --color-success-content: oklch(98% 0.005 150);
  --color-warning: oklch(72% 0.16 85);
  --color-warning-content: oklch(18% 0.01 85);
  --color-error: oklch(55% 0.20 15);
  --color-error-content: oklch(98% 0.005 15);
  --radius-selector: 0.5rem;
  --radius-field: 0.75rem;
  --radius-box: 1.25rem;
  --size-selector: 0.375rem;
  --size-field: 0.375rem;
  --border: 1.5px;
  --depth: 2;
  --noise: 1;
}</style>
5. <link rel="stylesheet" href="/static/custom.css" type="text/css">
6. <link rel="stylesheet" href="https://cdn.example.com/fonts.css" type="text/css">
7. [script(('',),{'src': 'https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4'})]
8. <script src="/static/app.js"></script>
9. <script src="https://cdn.example.com/analytics.js"></script>

Creating CSS Links with Media and CORS

The create_css_link() function supports media queries and CORS settings:

# Basic CSS link
basic_css = create_css_link("/static/styles.css")
print("Basic CSS link:")
print(basic_css)

# CSS link with media query for print styles
print_css = create_css_link(
    href="/static/print.css",
    media="print"
)
print("\nPrint-only CSS link:")
print(print_css)

# CSS link for dark mode with media query
dark_mode_css = create_css_link(
    href="/static/dark-theme.css",
    media="(prefers-color-scheme: dark)"
)
print("\nDark mode CSS link:")
print(dark_mode_css)

# External CSS with CORS enabled (for fonts from CDN)
font_css = create_css_link(
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap",
    crossorigin="anonymous"
)
print("\nExternal font CSS with CORS:")
print(font_css)

# CSS for large screens only
desktop_css = create_css_link(
    href="/static/desktop.css",
    media="screen and (min-width: 1024px)"
)
print("\nDesktop-only CSS link:")
print(desktop_css)

Basic CSS link:
<link rel="stylesheet" href="/static/styles.css" type="text/css">

Print-only CSS link:
<link rel="stylesheet" href="/static/print.css" type="text/css" media="print">

Dark mode CSS link:
<link rel="stylesheet" href="/static/dark-theme.css" type="text/css" media="(prefers-color-scheme: dark)">

External font CSS with CORS:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&amp;display=swap" type="text/css" crossorigin="anonymous">

Desktop-only CSS link:
<link rel="stylesheet" href="/static/desktop.css" type="text/css" media="screen and (min-width: 1024px)">

Creating JavaScript Scripts with Attributes

Similarly, create_js_script() supports various loading strategies:

# Example: Building a complete set of headers with media queries and CORS
complete_headers = build_headers(
    include_themes=True,
    custom_css=[
        create_css_link("/static/base.css"),
        create_css_link("/static/print.css", media="print"),
        create_css_link(
            "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700",
            crossorigin="anonymous"
        ),
        create_css_link(
            "/static/mobile.css", 
            media="screen and (max-width: 768px)"
        )
    ],
    custom_js=[
        create_js_script("/static/app.js", defer=True),
        create_js_script("/static/analytics.js", async_=True),
        create_js_script(
            "https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js",
            defer=True,
            crossorigin="anonymous"
        )
    ]
)

print(f"Complete headers with media queries and CORS ({len(complete_headers)} total):\n")
for i, header in enumerate(complete_headers, 1):
    print(f"{i}. {header}")

Complete headers with media queries and CORS (11 total):

1. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5" type="text/css">
2. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5/colors/properties-extended.css" type="text/css">
3. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" type="text/css">
4. <link rel="stylesheet" href="/static/base.css" type="text/css">
5. <link rel="stylesheet" href="/static/print.css" type="text/css" media="print">
6. <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700" type="text/css" crossorigin="anonymous">
7. <link rel="stylesheet" href="/static/mobile.css" type="text/css" media="screen and (max-width: 768px)">
8. [script(('',),{'src': 'https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4'})]
9. <script src="/static/app.js"></script>
10. <script src="/static/analytics.js"></script>
11. <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" crossorigin="anonymous"></script>

Export