Introduction
Hello! Here I will try to explain how to set up a React app with both Typescript and Tailwind.
Creating the React app with Typescript
This part is really simple, all you need to do is add the template option to create-react-app command.
Feel free to reaplace "app" with anything else.
Once installed simple cd into the directory.
npx create-react-app app --template typescript
cd app
Adding Tailwind
Finally we need to add tailwind. First we need to install the needed modules
npm install -D tailwindcss postcss autoprefixer
Next we need to create the config files which can easily be done via the following command:
npx tailwindcss init -p
Next open up the created "tailwind.config.js" file and add the following to "content":
content: [
'./src/**/*.{js,jsx,ts,tsx}',
],
Next we need to add the Tailwind directives to the "src/index.css" file, add the following to the top of the file:
@tailwind base;
@tailwind components;
@tailwind utilities;
Checking that it works
Now that we have set up Typescript and Tailwind we need to check to see if it works.
Open up "src/App.tsx" and change it to the following:
import React from 'react';
import './App.css';
function App() {
return (
<h1 className="text-3xl font-bold underline text-red-600">
Simple React Typescript Tailwind Sample
</h1>
);
}
export default App;
Done, now let's start the application.
npm start
The browser should automatically open and display the index page. If all is okay the header should be bold, underlined and red. 😀
The source for this example can be found here:
https://github.com/ethand91/react-typescript-tailwind
Like me work? I post about a variety of topics, if you would like to see more please like and follow me.
Also I love coffee.
Top comments (8)
the one that tailwind doc suggests for create react app doesnt work, this one works, thanks a lot!
Really? :O Your welcome, glad it helped :)
This is great!
Thanks ☺️
Thanks a lot!
Your welcome :D
After following these instructions several files did not created automatically { .tsx file} for example App.tsx and also index.tsx
therefore if it persists then follow the given GitHub link and after correcting it accordingly it worked for me.
not working