How to use Tailwind CSS with Create-React-App?
If you’ve been doing any front-end development, there’s a big chance you’ve at least heard of Tailwind CSS. It’s pretty much a front-end trend at the moment. But for those of you that didn’t, it’s a CSS framework that allows you to build components without ever leaving your HTML file. You might’ve seen people complaining about Tailwind leaving developers with very long classes in HTML files but that’s much out of the scope of this article. I won’t be discussing why Tailwind is amazing or why it can be bad, I’ll simply show you how you can use Tailwind CSS with CRA. You might be using a different template such as ViteJS but for this article, we’ll be using CRA. This article assumes you at least have a basic knowledge of CRA. Let’s start with creating our project folder. To do that, I’ll simply run the npx command and once it’s done, I’ll go into the folder and boot it up like so:
npx create-react-app my-tailwind-project
cd my-tailwind-project
npm start
This is the page you should be getting at the time of this writing if you used the code I provided. You can use different templates like the redux template and get different pages but the idea is that you should be getting some sort of a home page. This means we successfully installed React and can move on to the next step which is integrating our CSS framework, Tailwind CSS. The way Tailwind works is that it pretty much scans your HTML, Javascript, or any other templates for class names and generates styles based on the class names. To install Tailwind quickly, we’ll use the CLI method but you’re free to use any other method if that suits you. If you’re following along, I recommend you to use NPM(Node Package Manager) but you can also use yarn. To install Tailwind CSS using NPM, you simply run the following command:
npm i -D tailwindcss
-D is the option needed to install Tailwind as a development dependency. Once it’s done installing, you should be creating the config file like so:
npx tailwindcss init
Once you run the command and it does its thing, you should see a new file in your root directory called tailwind.config.js. That means everything is going well for now.
Okay, now we need to modify our tailwind config file and add the paths we want Tailwind to scan for styling classes. If you’re using the default CRA template like I am, your components should be in your src folder so we’ll add every subfolder and file in src like so:
"./src/**/*.{html,js,jsx}"
This will search our src folder including any subfolder for any files with HTML, JS, or JSX extensions. Now, Tailwind will compile a CSS for our build and that’s why we need to add the Tailwind directives to our main CSS file, in our case, it’s our index.css file in our src folder. Tailwind directives are as follows:
@tailwind base;
@tailwind components;
@tailwind utilities;You need to add these to the top of your main CSS file, it ends up looking like this:
Perfect! Now we need to run the CLI tool to scan our template files and build our CSS. The command is as follows:
npx tailwindcss -i ./src/index.css -o ./dist/output.css --watch
This will scan our index.css which is our main CSS file and build our CSS file into our output.css file which is located under a dist folder Tailwind will create for you. You don’t have to create a folder at all. Once that’s done, you might want to press CTRL+C in your console to exit the process. Now, let’s delete everything that’s inside our App.js file and try to use Tailwind.
If you run npm start now and use inspect element on the paragraph we just added, you’ll see that it has a text-xl class and it automatically has some CSS styling. This is all thanks to Tailwind CSS but this doesn’t end there either. Did you know there are component libraries designed around Tailwind CSS? Well, DaisyUI is one of them! Installing it is incredibly easy. Let’s do that as well! Simply install it using NPM like so:
npm i daisyui
Easy, right? Well, you need to include DaisyUI in your Tailwind config file as well. If you navigate to your tailwind config file, you’ll see something called plugins. If you check Tailwind official docs, a plugin pretty much helps you inject different styling into the user’s stylesheet. You simply require a plugin and it’ll immediately start working like so:
Okay, that was pretty easy, wasn’t it? Let’s see if it works. I’ll add a simple primary button.
<button className="btn btn-primary">Button</button>
And as you can see, it works!
This is all from me for today. Tailwind can help you create amazing websites fast, you just need to have some hands-on practice with it. If you have any questions, leave me a comment down below and I’ll see you all next time.
