Tailwind, React, and TypeScript - How to Get Started

Want to construct your frontend with Tailwind, React, and Typescript? Look no further; here we will discuss everything that you'll need to get setup.

React and Typescript setup

Before we get started, "Tailwind CSS requires Node.js 12.13.0 or higher" (tailwindcss). Make sure you have Node.js installed and the correct version by running node --version in your command line. If you don't have it installed, feel free to visit Node.js's official website.

Now let's get down to business, creating a new React project with TypeScript using Create React App. The way we can bootstrap a new React project with TypeScript according to the Create React App documentation is npx create-react-app my-app --template typescript.

Install Tailwind CSS with Create React App

Your React + TypeScript project has now been made and all that's left is to install Tailwind CSS. To do so, we have to follow some steps according to Tailwind CSS's Create React App installation documentation.

Install Tailwind CSS via npm

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Install and configure CRACO

npm install @craco/craco

Once CRACO has finished installing, edit your package.json to use craco for all scripts except eject.

{
    // ...
    "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
      "eject": "react-scripts eject"
    },
}

Create a craco.config.js file at the root of your React project, adding in the tailwindcss and autoprefixer PostCSS plugins.

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

Create your configuration file

npx tailwindcss-cli@latest init

Include Tailwind in your CSS

Change the index.css file located in the src directory in the root of your React project.

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Conclusion

You're all set! You've successfully configured a React project to use TypeScript and Tailwind CSS. I hope this blog post helped you get your new frontend set up to create beautiful UI and UX.

Works Cited

• “Install Tailwind CSS with Create React App” tailwindcss, https://tailwindcss.com/docs/guides/create-react-app.
• “Adding TypeScript” Create React App, https://create-react-app.dev/docs/adding-typescript/.