ReactJS – Tailwind CSS Starter

ReactJS – Tailwind CSS Starter:

 

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.
  npm run format
  # or
  yarn format

from Tumblr https://generouspiratequeen.tumblr.com/post/635562636435668992

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s