Tailwind v3 React / Webpack 配置不正确

发布于 2025-01-20 14:27:52 字数 4121 浏览 1 评论 0原文

我正在尝试将 Tailwind v3 集成到我的 React v17 / Webpack v5 应用程序中。我没有收到任何错误，但没有应用任何样式。我缺少什么？

相关文件结构：

/client/index.js

import "./components/tailwind.css";
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import "core-js/stable";
import "regenerator-runtime/runtime";
import App from "./components/App.jsx";
import Login from "../client/components/Auth/Login.jsx";
import Signup from "../client/components/Auth/Signup.jsx";


ReactDOM.render(
  <Router>
      <Routes>
        <Route path="/" element={<App />}>
          <Route path="login" element={<Login />} />
          <Route path="signup" element={<Signup />} />   
      </Routes>
  </Router>,
  document.getElementById("myapplication")
);

/client/components/App.jsx

import React from "react";
import { useLocation, Outlet } from "react-router-dom";
import NavBar from "./NavBar/NavBar.jsx";
import Home from "./Home/Home.jsx";
import Footer from "./Home/Footer.jsx";

function App() {
  const location = useLocation();

  return (
    <main>
      <NavBar />
      <Outlet />
      {(location.pathname == "/" || location.pathname == "") && <Home />}

      {(location.pathname == "/" ||
        location.pathname == "" ||
        location.pathname.includes("resources")) && <Footer />}
    </main>
  );
}

export default App;

/client/components/tailwind.css

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

/public/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>MyApplication</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Webpack Bundle -->
    <script defer type="text/javascript" src="/myapplication-bundle.js"></script>   
  </head>
  <body>
    <div id="myapplication"></div>
  </body>
</html>

postcss.config.js

module.exports = {
  plugins: [
    require("tailwindcss")("./tailwind.config.js"),
    require("autoprefixer"),
  ],
};

/tailwind.config.js

module.exports = {
  content: ["./components/**/*.{js,jsx}", "../public/*.html"],
};

/wepback.config。 js

const path = require("path");
const ProgressBarPlugin = require("progress-bar-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  entry: path.join(__dirname, "/client/index.js"),
  output: {
    filename: "myapplication-bundle.js",
    path: path.join(__dirname, "/public"),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: [path.join(__dirname, "/client/"), /node_modules\/xhr/],
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-react", "@babel/preset-env"],
        },
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
  mode: "development" === process.env.NODE_ENV ? "development" : "production",
  devtool: "source-map",
  resolve: {
    extensions: [".js", ".jsx"],
  },
  plugins: [
    new ProgressBarPlugin(),
    new webpack.ProvidePlugin({
      process: "process/browser",
    }),
  ],
  resolve: {
    alias: {
      request$: "xhr",
    },
  },
};

/package.json

  "scripts": {
    "server-dev": "NODE_ENV=development nodemon main",
    "server-prod": "NODE_ENV=production node main",
    "react-dev": "NODE_ENV=development webpack --watch",
    "react-prod": "NODE_ENV=production webpack",
    "test": "NODE_ENV=test jest --coverage"
  },

原文

I am trying to integrate Tailwind v3 into my React v17 / Webpack v5 app. I don't get any errors, but no styles are applied. What am I missing?

Relevant file structure:

/client/index.js

import "./components/tailwind.css";
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import "core-js/stable";
import "regenerator-runtime/runtime";
import App from "./components/App.jsx";
import Login from "../client/components/Auth/Login.jsx";
import Signup from "../client/components/Auth/Signup.jsx";


ReactDOM.render(
  <Router>
      <Routes>
        <Route path="/" element={<App />}>
          <Route path="login" element={<Login />} />
          <Route path="signup" element={<Signup />} />   
      </Routes>
  </Router>,
  document.getElementById("myapplication")
);

/client/components/App.jsx

import React from "react";
import { useLocation, Outlet } from "react-router-dom";
import NavBar from "./NavBar/NavBar.jsx";
import Home from "./Home/Home.jsx";
import Footer from "./Home/Footer.jsx";

function App() {
  const location = useLocation();

  return (
    <main>
      <NavBar />
      <Outlet />
      {(location.pathname == "/" || location.pathname == "") && <Home />}

      {(location.pathname == "/" ||
        location.pathname == "" ||
        location.pathname.includes("resources")) && <Footer />}
    </main>
  );
}

export default App;

/client/components/tailwind.css

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

/public/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>MyApplication</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Webpack Bundle -->
    <script defer type="text/javascript" src="/myapplication-bundle.js"></script>   
  </head>
  <body>
    <div id="myapplication"></div>
  </body>
</html>

postcss.config.js

module.exports = {
  plugins: [
    require("tailwindcss")("./tailwind.config.js"),
    require("autoprefixer"),
  ],
};

/tailwind.config.js

module.exports = {
  content: ["./components/**/*.{js,jsx}", "../public/*.html"],
};

/wepback.config.js

const path = require("path");
const ProgressBarPlugin = require("progress-bar-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  entry: path.join(__dirname, "/client/index.js"),
  output: {
    filename: "myapplication-bundle.js",
    path: path.join(__dirname, "/public"),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: [path.join(__dirname, "/client/"), /node_modules\/xhr/],
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-react", "@babel/preset-env"],
        },
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
  mode: "development" === process.env.NODE_ENV ? "development" : "production",
  devtool: "source-map",
  resolve: {
    extensions: [".js", ".jsx"],
  },
  plugins: [
    new ProgressBarPlugin(),
    new webpack.ProvidePlugin({
      process: "process/browser",
    }),
  ],
  resolve: {
    alias: {
      request$: "xhr",
    },
  },
};

/package.json

  "scripts": {
    "server-dev": "NODE_ENV=development nodemon main",
    "server-prod": "NODE_ENV=production node main",
    "react-dev": "NODE_ENV=development webpack --watch",
    "react-prod": "NODE_ENV=production webpack",
    "test": "NODE_ENV=test jest --coverage"
  },

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

a√萤火虫的光℡ 2025-01-27 14:27:52

在 tailwind.config.js 中，尝试：

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

您可以在此处查看有关使用 tailwind css 进行 React 的文档：

https://tailwindcss.com/docs/guides/create-react-app

in tailwind.config.js, try to :

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

you can see documentation about using react with tailwind css in here:

https://tailwindcss.com/docs/guides/create-react-app

回复收藏 0 原文

~没有更多了~

关于作者

情域

暂无简介

文章

28 人气

关注发私信

李珊平

文章 0 评论 0

关注

Quxin

文章 0 评论 0

关注

范无咎

文章 0 评论 0

关注

github_ZOJ2N8YxBm

文章 0 评论 0

关注

若言

文章 0 评论 0

关注

南…巷孤猫

文章 0 评论 0

友情链接

文江博客

Tailwind v3 React / Webpack 配置不正确

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

李珊平

Quxin

范无咎

github_ZOJ2N8YxBm

若言

南…巷孤猫

友情链接

Tailwind v3 React / Webpack 配置不正确

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

李珊平

Quxin

范无咎

github_ZOJ2N8YxBm

若言

南…巷孤猫

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。