Skip to main content

​
Overview

Jowy Portfolio uses TailwindCSS v4 with the new @import syntax and DaisyUI for component styling. The configuration leverages custom utilities for advanced visual effects like gradient masks and neon glows.

​
Tailwind Configuration

The tailwind.config.mjs file uses a minimal configuration with Flowbite plugin: 
// tailwind.config.mjs
import flowbite from "flowbite/plugin";

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
    "./node_modules/flowbite/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [flowbite],
};
This is the legacy config. The actual styling power comes from the new @import syntax in global.css.

​
Global CSS Setup

The src/styles/global.css file imports Tailwind v4 and DaisyUI: 
/* Import custom font */
@import url("https://fonts.googleapis.com/css2?family=Syne:[email protected]&display=swap");

/* TailwindCSS v4 */
@import "tailwindcss";
@plugin "daisyui";

/* Apply font globally */
html,
body {
  font-family: "Syne", sans-serif;
}
The Syne font family provides a modern, artistic style that’s ideal for electronic/house music portfolios. Its bold weight range (400-800) allows for strong visual hierarchy.

​
Custom Theme Variables

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-primary: #f7a009;
  --color-primary-dark: #000000;
  --color-text: #000000;
  --color-text-dark: #ffffff;
}
These variables are accessible in Tailwind classes:
  • bg-primary → #f7a009
  • bg-primary-dark → #000000
  • text-text-dark → #ffffff

​
Custom Gradient Mask Utilities

The portfolio includes powerful custom utilities for creating gradient fade effects:

​
Fade Top + Bottom + Left

@utility mask-fade-top-bottom-left {
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      black 0%,
      black 60%,
      transparent 100%
    ),
    linear-gradient(to right, transparent 0%, black 5%);
  -webkit-mask-composite: intersect;
  mask-composite: intersect;
}

<div class="mask-fade-top-bottom-left">
  <!-- Content fades at top, bottom, and left edges -->
</div>

​
Fade Top + Bottom + Right

@utility mask-fade-top-bottom-right {
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      black 0%,
      black 60%,
      transparent 100%
    ),
    linear-gradient(to left, transparent 0%, black 5%);
  -webkit-mask-composite: intersect;
  mask-composite: intersect;
}

​
Fade All Sides

@utility mask-fade-all-sides {
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      black 0%,
      black 60%,
      transparent 100%
    ),
    linear-gradient(
      to right,
      transparent 0%,
      black 1%,
      black 99%,
      transparent 100%
    );
  -webkit-mask-composite: intersect;
  mask-composite: intersect;
}

Left Fade

mask-fade-top-bottom-left

Right Fade

mask-fade-top-bottom-right

All Sides

mask-fade-all-sides

​
Diagonal Fade with Side Masking

An advanced utility for creating diagonal fades with customizable side fading: 
.mask-fade-diagonal {
  /* Control the width of side fades */
  --side-fade-width: 30%;

  mask-image:
    /* Bottom fade */
    linear-gradient(to bottom, transparent 0%, black 90%),
    /* Left fade */
    linear-gradient(to right, transparent 0%, black var(--side-fade-width)),
    /* Right fade */
    linear-gradient(to left, transparent 0%, black var(--side-fade-width));

  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
}
The --side-fade-width CSS variable allows you to adjust the fade distance dynamically. Set it inline: style="--side-fade-width: 20%"

​
Neon Glow Effect

Create striking neon text effects with the .neon-style class: 
.neon-style {
  color: var(--neon-glow-color, #ffffff);
  text-shadow:
    0 0 5px var(--neon-glow-color, #ffffff),
    0 0 8px var(--neon-glow-color, #ffffff),
    0 0 15px var(--neon-glow-color, #ffffff),
    0 0 25px var(--neon-glow-color, #ffffff);
}

​
Usage with Dynamic Colors

<body style="--neon-glow-color: #f7a009;">
  <h1 class="neon-style">Glowing Text</h1>
</body>
The neon color is set dynamically per page: 
<BaseLayout
  title="DJ"
  neonGlowColor="#00ff88"
>
  <!-- Page content with green neon effects -->
</BaseLayout>

neonGlowColor: "#00ff88" // Green

​
Scrollbar Styling

Custom scrollbar with dark mode support using Tailwind’s arbitrary variants: 
<body
  class="[&::-webkit-scrollbar]:w-2
         [&::-webkit-scrollbar-thumb]:rounded-full
         [&::-webkit-scrollbar-thumb]:bg-gray-300
         dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500
         [&::-webkit-scrollbar-track]:m-2
         [&::-webkit-scrollbar-track]:rounded-full
         [&::-webkit-scrollbar-track]:bg-gray-100
         dark:[&::-webkit-scrollbar-track]:bg-neutral-700"
>
1

Set scrollbar width

[&::-webkit-scrollbar]:w-2 creates a slim 8px scrollbar
2

Style the thumb

Round corners and set colors for light/dark modes
3

Style the track

Add margin and background colors

​
DaisyUI Integration

DaisyUI is loaded as a Tailwind plugin: 
@plugin "daisyui";

​
Available Components

The portfolio uses DaisyUI components like:
  • Modal dialogs
  • Cards
  • Buttons
  • Form elements

​
Theme Switching

DaisyUI themes are controlled via the data-theme attribute: 
document.documentElement.setAttribute(
  "data-theme",
  theme === "dark" ? "github-dark-default" : "github-light-default"
);

​
Package Dependencies

{
  "dependencies": {
    "@tailwindcss/vite": "^4.1.17",
    "tailwindcss": "^4.1.17",
    "daisyui": "^5.5.5"
  }
}
The project uses TailwindCSS v4 with the new Vite plugin for improved performance and better developer experience.

​
Best Practices

Use Custom Utilities

Define reusable effects like masks and glows as @utility declarations

CSS Variables for Dynamic Values

Use CSS custom properties for values that change per page or component

Arbitrary Variants

Leverage [&::pseudo]:class syntax for one-off pseudo-element styling

DaisyUI for Components

Use DaisyUI components for consistent UI patterns

Build docs developers (and LLMs) love

Get started for freeTalk to us