An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
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# oryarn 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
.prettierrc
file.
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.
Original post here.
Original Link: https://dev.to/angelcodes/reactjs-tailwind-css-starter-4ahn
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To