# How to Configure Tailwind CSS in LunaTV: Complete Setup Guide

> Easily configure Tailwind CSS v3 in LunaTV using our complete setup guide. Learn to customize themes, process builds, and add custom styles for a modern, type-safe design.

- Repository: [MoonTechLab/LunaTV](https://github.com/MoonTechLab/LunaTV)
- Tags: how-to-guide
- Published: 2026-09-08

---

**LunaTV configures Tailwind CSS v3 through three core files—[`tailwind.config.ts`](https://github.com/MoonTechLab/LunaTV/blob/main/tailwind.config.ts) for theme customization, [`postcss.config.js`](https://github.com/MoonTechLab/LunaTV/blob/main/postcss.config.js) for build processing, and [`src/styles/globals.css`](https://github.com/MoonTechLab/LunaTV/blob/main/src/styles/globals.css) for base directives—enabling a type-safe, dark-mode-ready styling system with custom animations and the Inter font family.**

LunaTV, an open-source streaming interface by MoonTechLab, leverages Tailwind CSS v3 alongside PostCSS to deliver a responsive, themeable UI. Understanding how to configure Tailwind CSS in LunaTV requires examining the interplay between the TypeScript configuration file, the PostCSS pipeline, and the global stylesheet that defines custom CSS variables and animations.

## Tailwind Configuration Architecture

The configuration spans three distinct areas: core settings in TypeScript, build-time processing, and runtime style injection.

### tailwind.config.ts

The primary configuration file at the repository root defines the design system. It specifies **dark mode** set to `"class"`, enabling manual toggling by adding a `dark` class to the `<html>` element. The **content** array controls purging, targeting `src/pages/**/*.{js,ts,jsx,tsx,mdx}`, `src/components/**/*.{js,ts,jsx,tsx,mdx}`, and `src/app/**/*.{js,ts,jsx,tsx,mdx}` to ensure unused utilities are eliminated from production builds.

The theme extension includes several customizations:

- **Custom screens**: A `mobile-landscape` breakpoint targeting devices with a maximum height of 700px in landscape orientation.
- **Font family**: `fontFamily.primary` loads the Inter variable font while preserving the default sans stack.
- **Color palette**: `colors.primary` defines a complete 50-900 scale, mirrored as CSS variables in [`globals.css`](https://github.com/MoonTechLab/LunaTV/blob/main/globals.css).
- **Animations**: Custom `keyframes` for `flicker`, `shimmer`, `fadeIn`, and `slideUp`, paired with corresponding `animation` shortcuts.
- **Plugins**: The `@tailwindcss/forms` plugin is loaded to normalize form element styling.

All settings are typed using Tailwind's `Config` interface, providing full TypeScript safety.

### postcss.config.js

The PostCSS configuration file wires Tailwind into the Next.js build pipeline:

```javascript
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

```

This configuration ensures Tailwind's generated CSS receives vendor prefixes for cross-browser compatibility during the build process.

### src/styles/globals.css

The global stylesheet serves as the entry point for Tailwind directives within the application. It contains:

- The three Tailwind directives: `@tailwind base;`, `@tailwind components;`, and `@tailwind utilities;`.
- A `:root` block declaring CSS custom properties (`--tw-color-primary-*`) that correspond to the color palette defined in [`tailwind.config.ts`](https://github.com/MoonTechLab/LunaTV/blob/main/tailwind.config.ts).
- Typography utilities (`.h0`, `.h1`, `.h2`) using `@apply` to maintain consistent heading styles.
- Layout utilities including `.layout`, `.bg-dark a.custom-link`, and `.min-h-main`.
- The `.animated-underline` class (lines 95-115) that creates gradient underline animations using the primary color CSS variables.

## Next.js Integration

Next.js automatically detects the [`postcss.config.js`](https://github.com/MoonTechLab/LunaTV/blob/main/postcss.config.js) file without requiring additional settings in [`next.config.js`](https://github.com/MoonTechLab/LunaTV/blob/main/next.config.js). The CSS import must occur early in the component tree, typically within [`src/app/layout.tsx`](https://github.com/MoonTechLab/LunaTV/blob/main/src/app/layout.tsx) or a custom [`_app.tsx`](https://github.com/MoonTechLab/LunaTV/blob/main/_app.tsx) component. Because the `content` paths in [`tailwind.config.ts`](https://github.com/MoonTechLab/LunaTV/blob/main/tailwind.config.ts) include the `src/styles/` directory, modifications to [`globals.css`](https://github.com/MoonTechLab/LunaTV/blob/main/globals.css) trigger automatic rebuilds during development.

## Customizing the Tailwind Setup

To modify the LunaTV styling system:

1. **Extend the color palette**: Add entries to the `colors` object in [`tailwind.config.ts`](https://github.com/MoonTechLab/LunaTV/blob/main/tailwind.config.ts) and replicate the values as CSS variables in [`globals.css`](https://github.com/MoonTechLab/LunaTV/blob/main/globals.css) to maintain consistency with existing components.
2. **Add breakpoints**: Insert new entries under `theme.extend.screens` for additional responsive behavior.
3. **Install plugins**: Run `pnpm add -D <plugin-name>` and append the plugin to the `plugins` array in [`tailwind.config.ts`](https://github.com/MoonTechLab/LunaTV/blob/main/tailwind.config.ts).
4. **Adjust purge paths**: Update the `content` array when adding new source directories (such as `src/widgets/`) to prevent style stripping.

After configuration changes, restart the development server with `pnpm dev` to regenerate the CSS.

## Practical Usage Examples

### Applying Custom Colors and Fonts

```tsx
export default function PlayButton() {
  return (
    <button className="bg-primary-500 hover:bg-primary-600 text-white font-primary py-2 px-4 rounded">
      Play
    </button>
  );
}

```

The `bg-primary-500` and `hover:bg-primary-600` classes reference the extended color palette, while `font-primary` applies the Inter typeface defined in the configuration.

### Using Custom Utility Classes

```tsx
export default function NavLink({ href, children }: { href: string; children: React.ReactNode }) {
  return (
    <a href={href} className="animated-underline text-primary-400">
      {children}
    </a>
  );
}

```

This component utilizes the `.animated-underline` utility defined in [`globals.css`](https://github.com/MoonTechLab/LunaTV/blob/main/globals.css), which leverages the `--tw-color-primary-400` and `--tw-color-primary-500` CSS variables for gradient hover effects.

### Implementing Dark Mode

```tsx
import { useTheme } from 'next-themes';

export default function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      Toggle {theme === 'dark' ? 'Light' : 'Dark'}
    </button>
  );
}

```

Because [`tailwind.config.ts`](https://github.com/MoonTechLab/LunaTV/blob/main/tailwind.config.ts) specifies `darkMode: 'class'`, toggling the theme via `next-themes` automatically activates all `dark:` prefixed utilities throughout the application.

## Summary

- **Core configuration** resides in [`tailwind.config.ts`](https://github.com/MoonTechLab/LunaTV/blob/main/tailwind.config.ts), defining dark mode, content paths, custom screens, the Inter font, primary color palette, and animation keyframes.
- **Build processing** occurs through [`postcss.config.js`](https://github.com/MoonTechLab/LunaTV/blob/main/postcss.config.js), which runs Tailwind followed by autoprefixer.
- **Global styles** in [`src/styles/globals.css`](https://github.com/MoonTechLab/LunaTV/blob/main/src/styles/globals.css) import Tailwind directives and declare CSS variables for the primary color system.
- **Type safety** is maintained throughout via TypeScript interfaces in the configuration file.
- **Customization** requires editing the appropriate configuration file followed by a development server restart.

## Frequently Asked Questions

### Where is the Tailwind configuration file located in LunaTV?

The main configuration file is [`tailwind.config.ts`](https://github.com/MoonTechLab/LunaTV/blob/main/tailwind.config.ts) in the repository root. This TypeScript file contains all theme extensions, custom screens, animations, and plugin registrations for the LunaTV design system.

### How does LunaTV handle dark mode with Tailwind?

LunaTV uses the `class` strategy for dark mode. When a `dark` class is applied to the `<html>` element (typically managed by `next-themes`), Tailwind automatically applies all `dark:` prefixed utility classes. This setting is defined as `darkMode: 'class'` in [`tailwind.config.ts`](https://github.com/MoonTechLab/LunaTV/blob/main/tailwind.config.ts).

### How do I add a custom color to the LunaTV theme?

Add the color definition to the `colors` object under `theme.extend` in [`tailwind.config.ts`](https://github.com/MoonTechLab/LunaTV/blob/main/tailwind.config.ts). For components that reference CSS custom properties, also add corresponding variables (e.g., `--tw-color-custom-500`) to the `:root` block in [`src/styles/globals.css`](https://github.com/MoonTechLab/LunaTV/blob/main/src/styles/globals.css) to ensure consistent theming across the application.

### What is the purpose of the @tailwindcss/forms plugin in LunaTV?

The `@tailwindcss/forms` plugin, loaded in [`tailwind.config.ts`](https://github.com/MoonTechLab/LunaTV/blob/main/tailwind.config.ts), provides basic reset styles and consistent styling for form elements across browsers. This ensures that inputs, checkboxes, and select menus match LunaTV's design system without requiring manual CSS overrides.