当 运行ning `npm 运行 build` on react app with tailwindcss 时，样式在本地工作但未正确应用

Question

我想弄清楚究竟发生了什么，但我完全没有想法。我最近过渡到 Tailwind 并根据 create-react-app 的说明进行设置，可以看到 here.

我也试过另一种设置，但我遇到了同样的问题。可以看到那个设置here.

无论出于何种原因，在本地开发中一切正常（当 运行ning 代码与 npm start 时）。但是当我构建代码时，我得到了一些非常奇怪的样式。

这是在本地开发

这是当 npm run build 是 运行.

代码的特定部分未按应有的方式显示：

 <div className='w-full lg:w-1/4 m-auto p-5 text-center lg:shadow-2xl rounded-xl'>
      <HelmetComponent
        title='Log in | Notify Me'
        description='Login page for Notify Me.'
      />
      <NavbarLoggedOut/>
      <h1 className='font-bold'>Log in</h1>

      <LoginForm
        onSubmit={onLogin}
      />

      <div className='text-base mt-2'>
        <p>
          Don&#39;t have an account? <LinkButton onClick={() => history.push('/signup')} label='Sign up here!' />
        </p>
      </div>

      <div className='mt-4'>
        <GoogleOAuthComponent
          buttonText='Log in with Google'
          setErrorMessage={updateErrorMessage}
        />
      </div>

      <div className='mt-4'>
        <LoadingBar
          isLoading={waitingForServerResponse}
        />
      </div>

      <div>
        {displayInfoMessage()}
      </div>
    </div>

我用 inspect element 打开了两个文件，一切似乎都一样。据我所见，问题无处不在，只要有任何类型的 h1 元素。

这是我的 tailwind.config.js:

const colors = require('tailwindcss/colors')

module.exports = {
  important: true,
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      main: {
        light: '#508991',
        DEFAULT: '#1b262c',
        '100': '#DBF9F4',
        '700': '#60949B',
      },
      black: colors.black,
      white: colors.white,
      gray: colors.trueGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.amber,
      blue: colors.blue,
      green: colors.green,
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

我也试过设置 purge: false 看看是否是问题的原因，但没有任何改变。

如果有人知道是什么原因造成的，我将不胜感激。

编辑：我还注意到填充在开发和构建时有所不同，所以如果有人知道为什么会这样，那也很好。

最终编辑：问题出在剩余的 boostrap 文件中，因为项目在切换到 tailwind 之前使用了它。在开发环境中 bootstrap css 被加载到其他一切之上，这导致了奇怪的行为。

index.tsx 中有剩余的导入：import 'bootstrap/dist/css/bootstrap.min.css'

删除导入后，boostrap 包从 package.json 文件中删除，node_modules 文件夹被删除并重新安装包，问题消失了。真正的布局实际上是由 npm run build

生成的

Answer 1

Tailwind 将所有标题重置为基本字体大小（默认为 16px），因此除非您明确表示，否则就是您得到的。这意味着您实际上在开发中获得了额外的样式，除非您在某处有自定义样式，否则这些样式不应该存在。

添加 text-xl 或您想要的任何大小到 h1

Answer 2

问题出在剩余的 boostrap 文件中，因为项目在切换到顺风之前使用了它。在开发环境中 bootstrap css 被加载到其他一切之上，这导致了奇怪的行为。

index.tsx 中有剩余的导入：import 'bootstrap/dist/css/bootstrap.min.css'

删除导入后，boostrap 包从 package.json 文件中删除，node_modules 文件夹被删除并重新安装包问题消失了。真正的布局实际上是由 npm run build

生成的