CODEWITHSUNDEEP
javascriptreactjstailwind-csspostcss
sadge
sadge

Reputation: 11

tailwindcss works with App.js but not with any of the components

I followed the tailwindcss tutorial shown here : https://tailwindcss.com/docs/installation I used : yarn create react-app myapp here is the code in App.js it imports one of the components from src/components :


    import React from "react";
    import Navbar from "./components/Navbar";
    
    function App() {
      return (
        <div>
          <Navbar/>
        </div>
      );
    }
    
    export default App;

the code for Navbar.jsx :


    import { useState } from "react"
    import React from 'react'
    import { FaBars, FaTimes } from "react-icons/fa";
    import Logo from "../assets/logo.png";
    
    const Navbar = () => {
      const [nav,setNav] = useState(false)
      const handleClick = () => setNav(!nav)
      
      return (
        <div>
            {/* Navbar */}
          <div className="fixed w-full h-[80px] flex justify-between items-center px-4 bg-[#0a192f] text-gray-300">
            <div>
              <img src={Logo} alt="Logo Image" style={{ width: "50px" }} />
            </div>
    
            {/* menu */}
            <ul className="hidden md:flex">
              <li>Home</li>
              <li>About</li>
              <li>Skills</li>
              <li>Work</li>
              <li>Contact</li>
            </ul>
    
            {/* hamburger */}
            <div className="md:hidden">
              <FaBars />
            </div>
            {/* mobilemenu */}
            <ul className="hidden absolute top-0 left-0 w-full h-screen bg-[#0a192f] flex flex-col justify-center items-center">
              <li className="py-6 text-4xl">Home</li>
              <li className="py-6 text-4xl">About</li>
              <li className="py-6 text-4xl">Skills</li>
              <li className="py-6 text-4xl">Work</li>
              <li className="py-6 text-4xl">Contact</li>
            </ul>
            {/* social */}
          </div>
        </div>
      )
    }
    
    export default Navbar

the style applies to App.js when I use tailwind classNames directly on App.js but doesn't work with imported components.

here is the tailwind.config:


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

also tailwindcss shows up under devDependencies in package.json


    "devDependencies": {
        "autoprefixer": "^9",
        "postcss": "^8.4.14",
        "tailwindcss": "npm:@tailwindcss/postcss7-compat"
      }

Upvotes: 0

Views: 992

Answers (2)

Ronit Vardhamane
Ronit Vardhamane

Reputation: 1

Add your navbar component or folder containing navbar inside source directory

Upvotes: 0

sadge
sadge

Reputation: 11

adding "purge: ["./src/**/*.{html,js,jsx}"]," to tailwind.config like this:


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

worked for me.

Upvotes: 1

Related Questions