How to Configure Tailwind CSS in LunaTV: Complete Setup Guide

LunaTV configures Tailwind CSS v3 through three core files—tailwind.config.ts for theme customization, postcss.config.js for build processing, and 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.
• 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:

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.
• 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 file without requiring additional settings in next.config.js. The CSS import must occur early in the component tree, typically within src/app/layout.tsx or a custom _app.tsx component. Because the content paths in tailwind.config.ts include the src/styles/ directory, modifications to 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 and replicate the values as CSS variables in 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.
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

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

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, which leverages the --tw-color-primary-400 and --tw-color-primary-500 CSS variables for gradient hover effects.

Implementing Dark Mode

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 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, defining dark mode, content paths, custom screens, the Inter font, primary color palette, and animation keyframes.
• Build processing occurs through postcss.config.js, which runs Tailwind followed by autoprefixer.
• Global styles in 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 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.

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. 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 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, 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}