How To use Tailwindcss in React
My journey as a self-taught developer began with a burning curiosity. Growing up in Uganda, where resources were scarce, I couldn't afford a formal education. Instead, I relied on handwritten notes from friends and online tutorials. As time went on, I got good at building websites for local businesses, each project proving my self-taught skills. But my dream of joining a major tech company seemed unreachable. Rejections piled up, all due to my academic background and self-doubt crept in. Then, a turning point. A friend I had shared my knowledge with landed a job at a promising startup in Kampala. He believed in me and recommended me. For five years now, I've been working remotely for that very company. They saw the potential in passionate, self-taught talent. But my heart is saddened by the millions in Uganda and the world facing the same challenges. That's why I am sharing my knowledge on this platform and other social platforms. My expertise is in PHP, JavaScript, WordPress, Technical Writing and business leadership. If you want to learn from me or collaborate, consider to follow or send me a on X.com/davidofug
Tailwindcss is a CSS library that allows you to Rapidly build modern websites without ever leaving your HTML. After many attempts with create-react-app, I gave up. I thought this wonderful wasn't for me.
Of recent, I have switched from using create-react-app to yarn create react-app. In this article, I want to share what I did and finally got Tailwindcss to work in React. Hope it saves you time.
Notice that with this setup we don't use craco like most content online recommend. I think those are outdated. But I will update this post in case I find out more.
$yarn create react-app <project-name>$cd <project-name>$yarn add tailwindcss postcss autoprefixer -D$npx tailwindcss initEdit tailwindcss.config.js file and set the content key to the following below.
content : [ "./src/**/*.{js,jsx,ts,tsx}", ]Add below to the top of the index.css if you changed from index.css to another file of your choice, add the code below to that particular file. This file should be imported into your root component.
@tailwind base;
@tailwind components;
@tailwind utilities;
It's time to proceed with coding now. Run the command below to start the node server so that you can preview your React App.
yarn start
Now to use Tailwindcss in case you are totally new to it, there is no better place than the documentation. Click here to visit the Documentation page and scroll up to the layout section.
Enjoy!
