Tailwindcss - colors and css properties not displayed when coding in ReactJS

Question

I have an issue. When coding in ReactJS the Tailwindcss effects are not working as expected. Actually the message "Welcome to Ecommerce" is displayed but the background is blank but the colors added in the code is not displayed. I tried to fix any Tailwindcss issue by typing this command: npx tailwindcss -i ./src/index.css -o ./src/output.css --watch but this warning below is coming up:

warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration. warn - https://tailwindcss.com/docs/content-configuration

    import React from 'react'

const Register = () => {
    return(
        <div classname= 'min-w-screen min-h-screen bg-[#241b70] flex justify-center items-center'>
            <div classname= 'w-[350px] text-[#ffffff] p-2'>
                <div classname= 'bg-[#6f68d1] p-4 rounded-md'>
                    <h2 classname='text-x1 mb-3 font-bold'>Welcome to Ecommerce</h2>
                </div>
            </div>
        </div>
    )
}

export default Register;

Also, when adding the index.css file into index.js file is not recognized; I think the Register Page's background is blank. Also I have added into Index.html but I do not know if this is wrong.. Please find

What I am looking for is to dislay the structure and colors added into the code. Your response will be greatfully helpful. Thank you very appreciated.

Consider checking the content file globs in the Tailwind configuration sufficiently cover the file that contains the Register component. — Wongjn
– Wongjn, Commented Dec 30, 2024 at 17:15

Frox · Accepted Answer · 2024-12-30 18:46:55Z

Basically what the you are being warned about is that the your Register component is not being picked up by the css build process.

What files need to be considered is specified via the content property in the tailwind.config.js file. Please make sure your file containing the Register is placed somewhere under the src directory and that you have added the file patterns in the file correctly.

Assuming your setup has the tailwind config file in the same directory as the src directory and given the fact you are using .js extensions (i.e. your react project does not use typescript and uses jsx), your tailwind config should have a content array as follows:

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

Further, the npx tailwindcss script produces a simple css file from the config it finds in the same directory and does not "fix" anything. This output file can then be manually included in your html file as you have attempted. However this is for when you are not using a bundler and wish to include your css in a seperately built html document. In the case of react, the inclusion of the css is done for you by your build/bundling process.

I suspect you are reading the home page for tailwind installation. Please consider checking out installation page relevant to your bundler. Once the development server is on you should see the tailwind css updates upon file save.

Hope this helps

Collectives™ on Stack Overflow

Tailwindcss - colors and css properties not displayed when coding in ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related