Tailwind-css v3 在 Vercel 上部署后无法正常工作答案

【问题标题】：Tailwind-css v3 is not working after deployed on VercelTailwind-css v3 在 Vercel 上部署后无法正常工作
【发布时间】：2022-08-16 23:16:16
【问题描述】：

我在用顺风 css v3和下一个Js并将我的应用程序部署在 vercel 上，我的 css 无法正常工作，但样式在应用程序创建期间工作本地主机

tailwind.config.js

    module.exports = {
  content: [
    \"./pages/**/*.{js,ts,jsx,tsx}\",
    \"./components/**/*.{js,ts,jsx,tsx}\",
  ],
  theme: {},
  plugins: [],
};

我怎样才能修复我的风格

标签： next.js tailwind-css vercel

【解决方案1】：

尝试（tailwind.config.js）：

module.exports = {
    darkMode: "class",
    content: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
        './node_modules/tw-elements/dist/js/**/*.{js,ts,jsx,tsx}',
    ],
    theme: {
        extend: {},
    },
    plugins: [
        require('tw-elements/dist/plugin')
    ], }

并使用 useEffect() 来“导入 tw-elements”（在文件 _app.js 中）：

import { useEffect } from "react";
import Layout from "../components/Layout"

import "../styles/globals.css"

function MyApp({ Component, pageProps }) {
    useEffect(() => {
        import('tw-elements');
    }, []);
    return (
        <Layout className="scroll-smooth transition-all">
            <Component {...pageProps} />
        </Layout>

    )
}

export default MyApp

【讨论】：

【解决方案2】：

在此处检查您的“组件”文件夹路径是否正确：

404.tsx
index.tsx

就我而言，我没有遵循最佳实践。我没有将其称为“组件”，而是将其称为“组合”。

在这里，您有一个示例，但带有“便当”文件夹：

[ITAMAESAN更改文件夹名称以强制修复的示例代码][1]

问题是自动更改文件夹名称的 VS，这是因为在 tailwind.config.js 上的名称也不相同，并且在某些路径中，文件夹是不同的。

确保一切正确。

【讨论】：