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 App.css with 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
3. Add
@tailwind base;
@tailwind components;
@tailwind utilities;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.
5. In package.json change the lines
to
Now running npm start/npm build will automatically build your Tailwind CSS for you.
6. Finally in your index.js file change the line
import ‘./index.css’;to
import ‘./css/tailwind.css’;7. Run npm start and check it out! To get a hang of Tailwind, try changing className=”App” to 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.
Have fun!
