Getting Started with React + Typescript + TailwindCSS

In this posting, we will figure out to create a project with CRA(Create-React-App) with Typescript and TailwindCSS.

CRA with Typescript

Let's create a project first.

$ npx create-react-app <project_name> --template typescript

Move on to the project folder.

$ cd <project_name>

Let's run our app as a test.

$ yarn start

Add TailwindCSS

Now, let's install TailwindCSS.

$ yarn add tailwindcss postcss

If you successfully installed it, setup it.

$ npx tailwind init

Now, the tailwind.config.js file is created.

Configuring TailwindCSS

Create the tailwind.css file into the src folder.

 

src/tailwind.css

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

 

Add more scripts into the package.json file.

 

package.json

...
"scripts": {
  "build:tailwind": "tailwindcss build src/tailwind.css -o src/tailwind.output.css",
  "prestart": "npm run build:tailwind",
  "prebuild": "npm run build:tailwind",
  ...
},

 

Now, build TailwindCSS.

$ yarn build:tailwind

Then, you can get the tailwind.output.css file.

 

Import this file in the index.tsx file.

 

src/index.tsx

...
import './tailwind.output.css';
...

Using TailwindCSS

Now, let's make an example with TailwindCSS.

 

src/App.tsx

function App() {
  return (
    <div className="App">
      <header className="App-header">
        ...
        <button
          className="bg-green-500 text-gray-100 rounded hover:bg-green-400 px-4 py-2 focus:outline-none"
        >
          Test
        </button>
      </header>
    </div>
  );
}

export default App;

I added a button with TailwindCSS.

It's done! Run the application.

Great! It works well!

Now, make your own application with these.