Issue configuring Tailwind for React project?

[playseeds]

Excited to use Tailwind for a React project but am having trouble configuring it. I believe it's been installed correctly and this is a file path issue (?).

Here's my tailwind.config file (trying a bunch of things but nothing yet working):

module.exports = {
content: [ 'src/**/.{js,jsx,html}', 
'src/components/.{js,jsx,html}', 
'./src/components/.{html,js,jsx}', 
'./App.js/.{js,jsx}', 
'public/index.html/*.html', ],

Here are the relevant paths in my file directory :

public
-index.html
src
-App.js
-App.css
-index.css
-components
       -Header.js
       -Nav.js
       -Footer.js

What am I doing wrong?

[wongjn]

What you may be doing wrong is:

• Not followed the steps per the relevant framework guide.
• Not having the @tailwind directives in any of the .css files.
• Not imported any .css files that have the @tailwind directives into the main app code.
• Not installed the tailwindcss NPM module.
• Not installed the postcss NPM module.
• Not used any Tailwind CSS classes in any file covered by the content file globs.
• Not covered files that use Tailwind CSS classes in the content file globs.
• Not configured Post CSS correctly to run the Tailwind CSS Post CSS plugin.
• Not run a compilation of Tailwind CSS.

[playseeds]

Thanks for the quick reply.

To confirm, you're saying the fire directory paths look okay in content []?

If so, I think the issue may be running a compilation of Tailwind CSS. When I tried to start the build process with this:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

I get this error in the terminal:

Specified input file ./src/input.css does not exist.

What could be causing this?

[wongjn]

The input file ./src/input.css may not exist.

[playseeds]

Yes, it clearly doesn't exist.

Looking into this more, it looks like it's not compiling correctly because of an issue with the file paths.

Could you respond to the original question I asked regarding whether the file paths I shared, and the content [] template, look correct?

[wongjn]

Yes, I can respond to the original question you asked – some of the content file globs look incorrect.

[albertovalez]

so whatever file you added the '@import "tailwindcss"' to is what you will use in the command,
Ex: I imported the file to App.css so I the command I ran was npx @tailwindcss/cli -i ./src/App.css -o ./src/output.css --watch

[selimbei]

I have same problem and may be this site can help .

[T-pl]

@playseeds sorry about the coments of the fellows above.
I had the same issue and fixed by change the name of file. In oficial documentation:
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

But input.css doesn't exist in the folder src of the project.
I changed to the correct name of my project: index.css
npx tailwindcss -i ./src/index.css -o ./src/output.css --watch
Search for the correct name of your project, change the command and will works.
(Sorry, my english it's not good, but I try to help without translator)