我正在尝试设置 Tailwind 3，但我收到了下一个警告。

No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.

这是我的项目结构

|_public : 
 |_index.html , 
 |_output.css  // this css file generated after i run the command | npx tailwindcss -i ./src/input.css -o ./public/output.css --watch
|_src
 |_input.css

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],

  theme: {
    extend: {},
  },
  plugins: [],
}

如果这是一个明显的问题，我很抱歉，这是我第一次尝试构建组件库。

我正在使用 Tailwind CSS 3 构建 React 组件库。当我使用 Storybook 运行组件时，它们会按预期显示。但是，当我与 Rollup 捆绑时，会应用类名称，但 CSS 不包含在构建中。

这是我的tailwind.config.js文件：

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

我的rollup.config.js文件：

import babel from 'rollup-plugin-babel';
import external from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import postcss from 'rollup-plugin-postcss';
import { terser } from 'rollup-plugin-terser';

const packageJson = require('./package.json');

export default [
  {
    input: 'src/index.js',
    output: [
      {
        file: packageJson.module,
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      postcss({
        config: …

我安装了 prettier-plugin-tailwindcss，当我使用 运行 Prettier 时，它成功地对 Tailwind 类进行了排序npx prettier --write index.html。但是，当我在 VScode 中点击“保存”时，prettier-plugin-tailwindcss 不会按预期对 Tailwind 类进行排序。

我正在关注本教程和本文档。正如您所看到的，我正确设置了开发依赖项，并且.prettierrc.json在项目中有一个。``

我期望当我点击“保存”时，它会自动按预期工作，即对顺风类进行排序，但该插件仅在使用运行 prettier 时才有效npx prettier --write index.html

我尝试过的事情：

我将保存格式设置为 true 并设置路径，但没有解决问题。

除了斜体和粗体之外，降价不起作用。我发现这个问题是由 Tailwind CSS 引起的，因为它处理文本大小和其他样式的方式。如果我在 my 中注释掉index.css导入（定义了 Tailwind 的指令）index.jsx，则所有 Markdown 类型（如标题、代码等）都可以正常工作。

新闻.jsx

import ReactMarkdown from 'react-markdown';
import { useState } from 'react';

function News() {
  const [markdown, setMarkdown] = useState('# I am heading');
  
  return (
    <div>
      <textarea value={markdown} onChange={e => setMarkdown(e.target.value)} />
      <ReactMarkdown>{markdown}</ReactMarkdown>
    </div>
  );
}

export default News;

index.css

import ReactMarkdown from 'react-markdown';
import { useState } from 'react';

function News() {
  const [markdown, setMarkdown] = useState('# I am heading');
  
  return (
    <div>
      <textarea value={markdown} onChange={e …

最初的问题：

我的设置一切正常，但我有一个问题：我的自定义字体未加载到 Storybook 中。

（我的主要问题是关于缺少的CSS变量，请到底部查看它。我只是发布所有代码以供参考。）

部分目录结构：

这是我在“app/(site)/layout.tsx”中使用 Next 修复本地字体的地方：

布局.tsx

import "../styles/globals.css"
import type { Metadata } from "next"
import localFont from "@next/font/local"
import Header from "@/app/components/Header"
import Footer from "@/app/components/Footer"
import { getCachedClient } from "@/sanity/lib/getClient"
import SiteConfigQuery from "@/sanity/queries/site-config/siteConfigQuery"
import { MobileDrawer } from "../components/MobileDrawer"

const tTFirs = localFont({
    src: [
        {
            path: "../../public/fonts/TypeType - TT Firs Regular.otf",
            weight: "300"
        },
        {
            path: "../../public/fonts/TypeType - TT Firs Medium.otf",
            weight: "400"
        },
        {
            path: "../../public/fonts/TypeType - TT Firs Medium …