Assuming you have an app structure created by
create-react-app, here are the super simple steps to getting started. The instructions use npm, but I’m confident these steps could easily be done in yarn as well.
1. First off, combine
index.css along with my other css files together to consolidate into one
index.css file, then move that into a new folder at
src/css. Though not technically necessary, I prefer having a clean file structure. If you don’t do this, you’ll have to change the directory paths I mention in later steps.
2. Next, install Tailwind with
npm install tailwindcss --save-dev
to the top of
index.css (or whatever you name your ‘main’ css file). At build time Tailwind will swap these out with its generated CSS.
4. Inside the css directory, run
npx tailwind init. This will create your configuration file at
src/css/tailwind.config.js where you can customize themes or add plugins. Read more at the configuration docs.
package.json change the lines
npm build will automatically build your Tailwind CSS for you.
6. Finally in your
index.js file change the line
npm start and check it out! To get a hang of Tailwind, try changing
className=”text-center”. If Tailwind gives you errors, read the official installation docs to troubleshoot.
I highly recommend checking out the Tailwind docs and searching for the CSS properties you’re trying to work with. Most every entry has examples for making buttons, boxes, etc.