ReactJS - Tailwind CSS Starter

#react #tailwindcss #javascript

Do you like tailwindcss and ReactJS?

If the answer is yes, a few weeks ago I created a template for React (cra) that allows you to create a create-react-app project with Tailwind CSS already configured.

in order to avoid setting tailwindcss in every project you use.

Setting Up

To use this template, you need to open your terminal or CMD in your preferred folder or path. Then, write the following command and press enter:

npx create-react-app myproject --template tailwindcss-starter
# or
yarn create react-app myproject --template tailwindcss-starter

This command will start generating a create-react-app project with all the basic dependencies for React and in turn, it will download each file and package that I have configured so that you can use Tailwind CSS.

Project Structure

Once your project has been generated you will see the following structure of your project.

└─ projectfolder
  ├─ node_modules
  ├─ public
  ├─ src
  ├─ .gitignore
  ├─ .prettierrc
  ├─ package.json
  ├─ postcss.config.js
  ├─ README.md
  ├─ tailwind.config.js
  └─ tailwind.css

tailwind.config.js: here you can edit your tailwindcss configuration, add more colors, animations, etc.
postcss.config.js: if you need something related to postcss here you can set up.
.prettierrc: here you can find a little configuration of prettier. This project has a prettier-plugin that help you regrouping all of the classes of tailwindcss in your JSX code.
tailwind.css: entry CSS file of tailwindcss, here you can add your custom classes or create components with the @apply directive.

Available Scripts

With this template, you have available the basic scripts that create-react-app proved us, but I added three more scripts in our projects.

The first script allows us to generate the fully CSS file of tailwindcss available in src/styles.css. This file contains all of the classes that tailwindcss provides us.

  npm run build-css:develop
  # or
  yarn build-css:develop

The other script allows us to generate a purged CSS file of tailwindcss. This means that the output CSS file only will have the classes that we used in our project.

  npm run build-css:production
  # or
  yarn build-css:production

The last one allows us to "format" our classes in our HTML or JSX code, this will regroup the tailwindcss classes in a certain order that you can find in .prettierrcfile.