React + Tailwind Starter

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

gigincg / create-react-tailwind-app

Create React Tailwind App

React Tailwind boilerplate generator, Inspired from Create Reason React Tailwind Generator

Boilerplate for Tailwind CSS Configured without ejecting from Create React App

Quick Start

npx create-react-tailwind-app

Project Name - Add the project name

Enter the name of the project you'd like to generate

my-app

| cra will create a new folder with the template project.

cd my-app

Follow the instructions in README.md

CRA

Add create react app globally

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

View on GitHub