ReactJS: Tailwind CSS Starter
2 min read
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.
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.
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
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
npm run format # or yarn format
And this is my template, I hope you find helpful this project, any advice or request is welcome. You can find the repository here.