⚠️ This lesson is retired and might contain outdated information.

Setup TailwindCSS in create-react-app

Horacio Herrera
InstructorHoracio Herrera
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 2 years ago

In this lesson, we'll set up a create-react-app (CRA) project from scratch with TailwindCSS. We'll delete unused default files and configure the minimal needed requirements for our application to get all the benefits of using TailwindCSS.

Horacio Herrera: [0:00] Let's create a React application by running npx create-react-app theming-with-tailwind. When that finishes, let's go and navigate to their project and install tailwind as a dev dependency.

[0:18] We run yarn add tailwindcss --def. After that finishes, we can run tailwind init. If you open the project in the code editor, we see that we have a plane create-react-app application with a tailwind.config.js file.

[0:40] Let's go and clean up some of the files here. Let's remove App.css. Let's remove App.test.css. Let's also remove the logo.svg. Let's go to App.css, and let's clean up some code here. Let's remove this import. Also, remove everything inside the App function and returns a simple div with the h1 that says Hello World.

[1:08] If we run the project, we see that we have Hello World in our browser. Now that we have everything installed, let's go to index.css and add at the top of the file @tailwind base; @tailwind components; and @tailwind utilities.

[1:28] Let's go to package.json file, and let's add some scripts that we need in order to make our project work. The first one is "build:tailwind" which is "tailwindcss build src/index.css -o src/output.css".

[1:49] This script is telling the TailwindCSS CLI to build our base index.css file and output a new file called output.css. Also, we're going to add "prestart" which is going to run "yarn build:tailwind" and also "prebuild" which is going to do the same.

[2:11] The prestart and prebuild scripts are going to be run before their "start" main script and the "build" main script. Whenever you do yarn start, it will run first prestart and then it will run start.

[2:29] This is needed because we are building all our CSS in a different process than our all application. Also, another thing that we can do is to add our output file ./src/output.css to our .gitignore file.

[2:45] That way, the file that is being generated is not going to be stored in our Git repository. The last thing that we need to do is go to the index.js file and update the import to the './index.css' file and change it to '.output.css' file.

[3:02] Now we can go and stop and start our server again, running yarn start. Then, we see that the result of our script will change the style of our h1. To see this working, we can go to our App.js file and add a tailwind className to our h1 to add the text-red-500, which is a TailwindCSS class and see that our heading changes the text color to red.

[3:32] In review, we create React application using create-react-app. We then install TailwindCSS to our project. Also, we added a couple of scripts to build our CSS in a separate process. We import the output of our CSS script result in our index.js file. Then, we test it with a simple tailwind class, and the result is visible in our screen with a Hello World in red.

Sébastien BARRE
Sébastien BARRE
~ 4 years ago

tailwind init fails with: "zsh: command not found: tailwind" You must have something in your shell that tries npx automatically?

Sébastien BARRE
Sébastien BARRE
~ 4 years ago

This is working but there isn't any support for purge-css, which makes it impractical for deployment, because the resulting CSS file, even in build mode, is so big.

Horacio Herrera
Horacio Herrerainstructor
~ 4 years ago

hey Sébastien!

thanks for the comments. gonna review the tailwind init error.

also, this is the first lesson out of five I’m recording, and you are right purge-css is needed, but I deliberately left it out for this video since I’m focusing on one concept at a time. by the end of this collection the project will be production ready!

I will keep you posted when new lessons are published!

Sébastien BARRE
Sébastien BARRE
~ 4 years ago

Oh this great, thanks, I didn't realize it was part of a series. Some videos here on Egghead sometimes just drop as-is. Looking forward to it.

Luciano dii Souza
Luciano dii Souza
~ 2 years ago

If you have erros like "tailwind not found" you can just run npx tailwind init adding npx on the start (npx = node package eXecutor) :)

Markdown supported.
Become a member to join the discussionEnroll Today