create-react-tailwind-app is an npx generator that creates a starter project with tailwind configured without ejecting from create-react-app. This means you don't go through configuration hell that usually rains open you when you eject as a beginner.

Similar to using create-react-app, Open a terminal and run:

npx create-react-tailwind-app

This will prompt you with the name of the new project you'd like to create

you@computer: ~/projects $ npx create-react-tailwind-app
Project name:my-app

This will generate your new project my-app in a directory. Next, you can cd into the directory, install the dependencies and run the project.

cd my-app
npm install

This will install all the dependencies. To run the project, run:

//To build tailwind and run react-scripts
npm start

expected output:

You may want to change the package name in package.json if you plan to publish the project

Note: The index.css file is autogenerated and will be over-written on every run. If you want to add CSS changes, which I would recommend you not to, you should do them in the tailwind.css file.

@tailwind base;
// Base CSS here

@tailwind components;
// Component CSS here

@tailwind utilities;
// Util level CSS here

You can refer to (Tailwind CSS)[https://tailwindcss.com] for further reference to using tailwind

npx create-react-tailwind-app

my-app

cd my-app

npm i -g create-react-tailwind-app
cra