2

I am trying to use Tailwind CSS in the react project. I followed the steps given in the documentation from here. But after completing all the steps, I am unable to see the tailwind CSS changes. I am adding the styles in the file Home.js like this,

import React from "react";
    .
    .
    .

  return (
    <>
        <div className="bg-red-500 h-96 py-80">
        <h1 className="text-3xl font-bold underline bg-yellow-400">
      Hello world!
    </h1>
        </div>
    </>
  );
};

export default Home;

But it is not showing anything demo Following are the required files:

package.json

{
  "name": "authlogin-boilerplate",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "express": "^4.17.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.1.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.2",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.11"
  }
}

tailwind.config.js

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

App.js

import { useState } from "react";
import "./App.css";
import "./index.css";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import About from "./components/About";
import SignupPage from "./components/SignupPage";
import LoginPage from "./components/LoginPage";
import ForgotPasswordPage from "./components/ForgotPasswordPage";
import ChangePasswordPage from "./components/ChangePasswordPage";
import Alert from "./components/Alert";

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  const [alert, setAlert] = useState(null);

  const showAlert = (message, type) => {
    setAlert({ msg: message, type: type });
    setTimeout(() => setAlert(null), 1500);
  };

  return (
    <>
      <Router>
        <Navbar showAlert={showAlert} />
        <Alert alert={alert} />
        <Routes>
          <Route path="/" element={<Home showAlert={showAlert} />} />
         .
         .
      </Router>
    </>
  );
}

export default App;

index.css

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

Also, my project structure is

dir

On thing I noticed that in my index.css, I am getting this warning

enter image description here

I don't know the reason, I have restarted the laptop twice but not working.

MagnusEffect
  • 3,363
  • 1
  • 16
  • 41

1 Answers1

1

This is not working because you haven't added the CRACO layer to your React app. Your setup is fine, but something is still to be added, you just need to run npm install @craco/craco inside your react app root and change your package.json file with the new value of start, build and eject command as shown below in the image, and finally start your server again this will work.

enter image description here

Gulshan Aggarwal
  • 954
  • 1
  • 7
  • 13
  • This is the doc for `v,2,1,16` and I am using `v.3.0.11` , hence showing error after creating `craco.config.js`. `Error: PostCSS plugin tailwindcss requires PostCSS 8.` – MagnusEffect Jan 08 '22 at 10:53
  • @MohitMaroliyaB17CS036 you need to install PostCSS 7 instead of PostCSS 8 because create-react-app doesn't support PostCSS 8 – Gulshan Aggarwal Jan 08 '22 at 10:58
  • I have postCSS-7 only, error says that it requires postCSS -8 – MagnusEffect Jan 08 '22 at 12:41
  • I'm having the same issue adding tailwind to my existing React project. Installing Craco as above doesn't fix for me. – crwils Apr 28 '22 at 16:42
  • 1
    @crwils tailwind CSS has updated the way you set up tailwind in create-react-app. Now you don't need to add any CRACO layer. Check out the docs- https://tailwindcss.com/docs/guides/create-react-app – Gulshan Aggarwal Apr 29 '22 at 04:45