哎！是我不会用还是文档写不清晰？就添加 tailwindcss 让我止步。

[lanmingle]

npm run new
# 添加 tailwindcss

modern.config.ts

import { appTools, defineConfig } from '@modern-js/app-tools';
import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';

// https://modernjs.dev/en/configure/app/usage
export default defineConfig({
  runtime: {
    router: true,
  },
  plugins: [
    appTools({
      // bundler: 'webpack', // Set to 'experimental-rspack' to enable rspack ⚡️🦀
      bundler: 'experimental-rspack', // 用哪个都是一样
    }),
    tailwindcssPlugin(),
  ],
  html: {
    title: '例子',
  },
  dev: {
    writeToDisk: false,
  },
});

global.css（改index.css）

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

html,
body {
  @apply size-full;
}

.myH1 {
    color: red;
}

layout.tsx

import { Outlet } from '@modern-js/runtime/router';

import './global.css';

export default function RootLayout() {
  return (
    <div className='size-full'>
      <Outlet />
    </div>
  );
}

报错：
The size-full class does not exist. If size-full is a custom class, make sure it is defined within a @layer directive.

如：

压根没注入，说好的开箱即用？

另外：

html,
body {
  @apply size-full;
}

这个为啥不行（是我的问题？）。

另外我想问下，目前modern开源版本这个真的能用到生产环境上吗？如果能那么请告知，是我那些问题？辛苦阅读了两天的文档，一下子让我止步。

[lanmingle]

升级 tailwindcss 即可

{
"tailwindcss": "^3.4.10"
}

哎！文档还是不够精细，说好的是开箱即用，却要让人折腾，如何交给一些新人