如何在Remix.js中结合Tailwind使用多份CSS模块？组件样式不生效问题排查

Let's break down why your button's styles aren't applying and fix it step by step:

1. First, Update Your Tailwind Config #

The core issue here is that Tailwind isn't scanning your component's CSS file, so it doesn't recognize or process the @apply directive. Open your tailwind.config.js and add your component CSS path to the content array:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,jsx,ts,tsx}",
    "./app/components/**/*.css", // Add this line to include component CSS files
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

This tells Tailwind to look for @apply rules and Tailwind classes in all CSS files inside your app/components folder.

2. Choose a CSS Build Strategy #

Your current script only processes the global Tailwind CSS file—your component's button.css isn't being touched by Tailwind. Here are two solid solutions:

Option 1: Import Component CSS into Your Global Tailwind File (Recommended) #

This keeps all your Tailwind processing in one place and avoids extra build steps. Open your input Tailwind file (styles/tailwind.css) and add an import for your component's CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Import your component-specific CSS */
@import "../app/components/button.css";

Now when you run npm run dev:css, Tailwind will process the imported button.css, convert the @apply bg-slate-400 to valid browser-readable CSS, and bundle it into your output app/styles/tailwind.css.

Just double-check your global CSS is loaded in root.tsx (which it should be if you followed the official Remix/Tailwind setup):

import styles from "./styles/tailwind.css";

export function links() {
  return [{ rel: "stylesheet", href: styles }];
}

Option 2: Separate Build Script for Component CSS (Less Recommended) #

If you want to keep component CSS files fully separate, add a new script to your package.json to process the component CSS directly:

"scripts": {
  "dev:css": "tailwindcss -i ./styles/tailwind.css -o ./app/styles/tailwind.css -w",
  "dev:component-css": "tailwindcss -i ./app/components/button.css -o ./app/components/button.output.css -w"
}

Then import the processed output file in your component instead of the raw CSS:

import './button.output.css'
export function Button() {
  return <button className='button-primary'>My Button</button>
}

Note: This creates extra CSS files to maintain, so Option 1 is generally the cleaner approach for most projects.

Why This Happened #

Browsers don't understand Tailwind's @apply directive natively—it's a custom rule that only Tailwind's processor can interpret. Since your button.css wasn't being scanned or processed by Tailwind, the @apply bg-slate-400 rule was left untranslated, and the browser simply ignored it.

内容的提问来源于stack exchange，提问作者Two Horses