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:
get_daisyui_headers
def get_daisyui_headers( include_themes:bool=True, # Include the daisyUI themes CSS file)->List: # List of Link and Script elements for daisyUI and Tailwind CSS
Get the standard daisyUI and Tailwind CSS CDN headers.
# 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:
create_css_link
def create_css_link( href:str, # URL or path to CSS file media:Optional=None, # Media query (e.g., "screen", "print") crossorigin:Optional=None)->functools.partial(<function ft_hx at 0x7fa54095df80>, 'link'): # Link element for CSS stylesheet
Create a CSS link element with optional attributes.
create_js_script
def create_js_script( 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)->Script: # Script element for JavaScript file
Create a JavaScript script element with optional attributes.
Combined Header Builder
A comprehensive function to build all headers with custom resources:
build_headers
def build_headers( 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)->List: # List of Link, Script, and Style elements for complete app headers
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
Example with custom resources:
# Build headers with custom resourcesfrom nbdev.config import get_configcfg = get_config()project_dir = cfg.config_pathcustom_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 inenumerate(custom_headers):print(f"{i+1}. {h}")
The create_css_link() function supports media queries and CORS settings:
# Basic CSS linkbasic_css = create_css_link("/static/styles.css")print("Basic CSS link:")print(basic_css)# CSS link with media query for print stylesprint_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 querydark_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 onlydesktop_css = create_css_link( href="/static/desktop.css", media="screen and (min-width: 1024px)")print("\nDesktop-only CSS link:")print(desktop_css)
Similarly, create_js_script() supports various loading strategies:
# Example: Building a complete set of headers with media queries and CORScomplete_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 inenumerate(complete_headers, 1):print(f"{i}. {header}")