小编kri*_*yaa的帖子

我有一个网站，使用 TailwindCSS 正确实现了深色/浅色 UI。

我想知道是否有一种方法可以强制网站以深色模式加载，直到用户通过单击切换按钮专门切换浅色模式。

为什么？因为我更喜欢网站在深色模式下的外观，但由于正确实现了浅色/深色主题，我宁愿保留它并强制它以深色模式加载，无论用户的浏览器设置如何。

当我将 Tailwind 添加到 React 项目时，它打破了现有的样式。

我希望只使用 Tailwind 类（如mb-3）作为快捷方式。
我没想到它会覆盖现有的样式，比如将按钮背景更改为透明。

我做错了吗？或者 Tailwind 是否故意覆盖样式？

编辑：

这就是我所说的：（来自node_modules\tailwindcss\src\css\preflight.css）

当我排除基础时，问题就消失了，即：

//@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

编辑2：

找到解决方案了！

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

我正在尝试加入顺风类并使用clsx将它们应用到按钮。默认应用一个类\'rounded-none\'，另一个类作为 prop 传入

const Button = ({\n  children, ...props\n}): JSX.Element => {\n\n  return (\n    <ADButton\n      className={clsx(\'rounded-none\', props.className)}\n      {...props}\n    >\n      {children}\n    </ADButton>\n  );\n};\n

假设我已经添加了padding-top: 0px;到按钮，如下所示

<Button\n  color="primary"\n  className="pt-0"\n>\n  {t(\'btn.add\')}\n</Button>\n

加入的类名应该是这样的\'rounded-none pt-0\'。如果没有传递 className 属性，则只需应用 \xe2\x80\x98rounded-none\xe2\x80\x99

现在遇到的问题是 \xe2\x80\x98rounded-none\xe2\x80\x99 仅适用于没有 className 属性的按钮。在带有 className 属性的按钮上，仅应用 className 属性，但不应用 \xe2\x80\x98rounded-none\xe2\x80\x99。我怎样才能解决这个问题，以便两个类都加入并应用于按钮？

有谁知道在哪里可以找到图中所示的服务器密钥？问题是 Firebase 稍微改变了 UI，现在我不知道在哪里可以找到它。

我用 BlocProvider / BlocListener 包装了 MaterialApp

我收到一个错误

"Unhandled Exception: 'package:go_router/src/router.dart': Failed assertion: line 280 pos 12: 'inherited != null': No GoRouter found in context" from the Listener callback

Widget build(BuildContext context) {
    return BlocProvider<AuthenticationBloc>(
      create: (context) => AuthenticationBloc()..add(AppStarted()),
      child: BlocListener<AuthenticationBloc, AuthenticationState>(
        listener: (context, state) {
          if (state is AuthenticationUnauthenticated) {
            context.goNamed(LoginPage.routeName);
          }
          if (state is AuthenticationAuthenticated) {
            context.goNamed(NavigationBarContainer.routeName);
          }
        },
        child: MaterialApp.router(
            title: 'Flutter Demo',
            routeInformationProvider: _router.routeInformationProvider,
            routeInformationParser: _router.routeInformationParser,
            routerDelegate: _router.routerDelegate,
            theme: ThemeData(
              primarySwatch: Colors.blue,
            )),
      ),
    );
  }

我在我的项目中使用 TailwindCSS，我想设置默认边框颜色，对于正常主题，我通过以下方式执行此操作：

module.exports = {
  mode: "jit",
  purge: ["{pages,app}/**/*.{jsx,tsx}", "node_modules/react-toastify/**"],
  darkMode: "media",
  theme: {
    extend: {
      borderColor: (theme) => ({
        DEFAULT: theme("colors.gray.100"), // Light theme default border color
        dark: {
          DEFAULT: theme("colors.gray.800"), // Dark theme default border color NOT WORKING
        },
      }),
  // ...
}

对于浅色主题，它工作正常，但是，对于深色主题，我似乎找不到应用默认值的方法，关于如何使其工作有什么想法吗？

多谢！

我必须并排放置两列。其中一列具有固定宽度。我真的很努力地理解为什么一列中的固定宽度在 Tailwind CSS flexbox 上不起作用。

我有以下代码：

<div class="flex flex-row justify-between items-start shrink-0">
    <p class="mt-4 h-14 overflow-hidden leading-7">This title pushed back the next element</p>
    <div class="p-1 w-16 h-16 text-white text-center">
        <p class="text-sm">05</p>
        <p class="text-3xl leading-none font-bold">JUNE</p>
    </div>
</div>

顺风版本：3.0.23

输出：

检查元素：

预期输出：

我正在使用底部导航器创建一个应用程序。我使用了一个，ShellRoute但我们的要求是隐藏屏幕上的底部导航器例如：当我转到另一个屏幕（例如用户个人资料页面）时，主页可以有底部导航器我必须隐藏底部导航器，但我ShellRoute在同一个屏幕中使用子路线ShellRoute，它不会隐藏底部导航器。

ShellRoute(
          navigatorKey: _shellNavigatorKey,
          builder: (context, state, child) {
            return MainScreen(child: child);
          },
          routes: [
            GoRoute(
              path: '/$dashboardRouteName',
              name: dashboardRouteName,
              pageBuilder: (context, state) => CustomPageRouteBuilder.route(
                key: UniqueKey(),
                child: const DashboardScreen(),
              ),
              routes: [
                GoRoute(
                  path: leaveRequestRouteName,
                  name: '$dashboardRouteName/$leaveRequestRouteName',
                  pageBuilder: (context, state) => CustomPageRouteBuilder.route(
                    key: state.pageKey,
                    child: const LeaveRequestScreen(),
                  ),
                ),
                GoRoute(
                  path: switchHolidayRouteName,
                  name: '$dashboardRouteName/$switchHolidayRouteName',
                  pageBuilder: (context, state) => CustomPageRouteBuilder.route(
                    key: state.pageKey,
                    child: const SwitchHolidayScreen(),
                  ),
                ),
              ],
            ),

之后，我将子路线分成一般路线，如下所示：

  ShellRoute(
          navigatorKey: _shellNavigatorKey,
          builder: …

我想知道是否有 NavigatorpopUntil()方法的替代方法，或者有任何解决方法可以实现相同的目的。

如果我要使用Navigator. 我会像这样使用：

void _logout() {
  Navigator.popUntil(context, ModalRoute.withName('/login'));
}

如何实现同样的目标go router？

我看到一个 github 问题 - [go_router] Implement popUntil #2728，但没有相同的积极结果。

我一直在通过第三方集成（例如SentryNavigatorObserver，FirebaseAnalyticsObserver）来分析不同的导航观察者，以使默认情况下没有它的工具相同。但我注意到这些都没有真正捕获所有路线转换。当他们在相应的控制台中显示数据时我看到了它。是的，它适用于push/ ，但不会跟踪pop同一级别内的任何转换。go这很烦人。有人知道解决的方法吗？

例如，

观察到从/page到 的转变。/page/detail

/pageA从到 的过渡/pageB则不是。