Tailwind + React TypeScript = 🔥👌😎

Over the past couple of years, TypeScript has started to gain momentum in the React world and, now, has official support in create-react-app. Using TypeScript allows us to get the benefits of IntelliSense, as well as the ability to further reason about our code.

Adopting TypeScript is easy as files can be incrementally upgraded without causing issues throughout the rest of your project.

Why Tailwind?
Most CSS frameworks do too much, they come with all sorts of predesigned components like buttons, cards, and alerts that might help you move quickly at first, but cause more pain than they cure when it comes time to make your site stand out with a custom design.
Tailwind is different, Instead of opinionated predesigned components,

Tailwind provides low-level utility classes that let you build completely custom designs from the html.

Let's build something with these tools and see how well they work together. To get started you should have Git, Node.js and Yarn (optional if you prefer npm) installed.

Open your favorite terminal and run :

npx create-react-app tailwind-react --typescript

This will create a new Create React App project in TypeScript, then we need to install Tailwind CSS as a dev dependency.

cd tailwind-react
yarn add tailwindcss -D

After installation process is done, we need to create Tailwind CSS configuration file. To do so, we need to run the following command:

npx tailwind init

This will initialise Tailwind with a new configuration file in the root of your project. Now we set up our CSS “entry point”. You can do this wherever you like but here’s how I do it (if you change these paths, you will need to change them in the package.json scripts further down this article). Create src/tailwind.css and paste in the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

Now we need to add a custom script in package.jsonfile. Let’s call it tailwind:css. This script will update src/index.css file from src/tailwind.css.

"scripts": {
  "start": "npm run tailwind:css && react-scripts start",
  "tailwind:css": "tailwind build src/tailwind.css -c tailwind.config.js -o src/index.css",
  "build": "npm run tailwind:css && react-scripts build",
  ...
}

Setup is completed, now you can go ahead and start your application by running yarn start in your terminal. You will notice that your index.css file is populated with a bunch of css, that's as a result of thetailwind:css script that is run when you start or build your application. Learn Git online from the best Git tutorials recommended by the programming community.

Now let’s get rid of this App.css file and use some tailwind utility classes. Replace the classes on the div and header with the classes in the snippet below.

App.tsx

Remember the tailwind.config.jsfile that was generated earlier, i’m going to show you one way you can use it. You can add a custom tailwind class by using the addComponents helper function in the plugins array. In the snippet below you will see how to create the AppLogo class as a tailwind component.

tailwind.config.js

And now you are good to go, just restart your application and you landing page will look like the image header above.

You can find the source code on Github.

Happy Coding ✌