Can anyone help me figure out why styles are not being applied when integrating Tailwind v3 into my React v17 / Webpack v5 app? I am not receiving any errors, so it's unclear what may be missing.
Here is the 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"
},