The answer
Three directives you add to your main CSS file: @tailwind base, @tailwind components, and @tailwind utilities. They inject Tailwind's base styles, component classes, and utility classes into your project.
How to Set Up Tailwind CSS in a React Project
What are the Tailwind directives?
More FAQs in How to Set Up Tailwind CSS in a React Project
Install Tailwind with npm, generate the config, configure the content paths to your source files, add the three Tailwind directives to your CSS, import that CSS in your entry point, and start using utility classes in components.
Usually because you forgot to configure the content paths in the Tailwind config. Tailwind only generates CSS for classes it finds in the files you list, so if the paths are wrong or missing, no CSS is produced.
No. The CDN ships the entire framework, including classes you do not use, which defeats one of Tailwind's main benefits. Install Tailwind properly so it scans your markup and ships only the classes you use.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.