Getting Started With React + TypeScript + Tailwind + Classnames In Minutes
In this morning quick start, we are going to bootstrap a
create-react-app with Tailwind and see how you can get it all up and running quickly with some state-based styling using
First, we need to create the TypeScript React app with
Second, we will install the other packages required for today.
This part took quick inspiration from Dave Ceddia's post with a modern update.
Let's update our scripts to have the following:
prebuild scripts will run before any
build script that is run. We are telling it to build the
index.css file and output it to
Add Tailwind imports
src/index.css to look like the following:
Then, we will need to update our
index.tsx file to change the import from
Now we are ready to run!
Playing around with App.tsx
yarn start to get our application up and running.
Once up, let's update our
App.tsx file to look like the following:
When we run the app, we should now get the following:
These classnames come from the Tailwind docs. The docs are very user friendly! Search for your CSS properties and apply them from there.
As an added bonus, if you are a VSCode user, check out their VSCode extension to help autocomplete classnames!
Updating the App.tsx file to work based on logic
We can now add logic in based on
useState to toggle between different states.
App.tsx to show the following:
Once we run the app now, if we click the button we will see the background change to red!
Toggled App state
For more complex logic, we can use the classnames package to help us define which classnames to apply.
While this example is trivial, it becomes important for when you are defining variants based on props. We could swap out
toggle to be logic such as
status === 'error', etc. to reflect different possibilities through our application.
This has been a quick morning coffee and blog post on getting up and running with Tailwind without getting into the nitty gritty details.
Tailwind has a great reputation and for good reason - I highly recommend using this playground to try out what else it does offer.
Resources and Further Reading
Image credit: Mael BALLAND
See how you can dynamically create UIs based on React State using dynamic imports, Next.js 10 and React State
Have you ever wanted to build a UI Component Library with TypeScript and React? This blog post will take you through a straightforward set up that uses the bare minimum to get a working component library that you can re-use across your different React projects.
This post will go through a simple example of setting up simple authentication with a user and password to your Next.js website.
This blog post will explore the new internationalised routing in Next.js 10 and how you can use this to your advantage with react-intl for React.js
See a roundup of my look into Vercel's new analytics feature that you can enable on a Vercel project and see how I used GTMetrix to help push some numbers.
1,200+ PEOPLE ALREADY JOINED ❤️️
Get fresh posts + news direct to your inbox.
No spam. We only send you relevant content.