DEV Community

Cover image for Project 27 of 100 - mini-project: Configuring a React Project for Tailwind CSS
James Hubert
James Hubert

Posted on

Project 27 of 100 - mini-project: Configuring a React Project for Tailwind CSS

Hey! I'm on a mission to make 100 React.js projects ending March 8th. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!

Link to today's deployed app: Link
Link to the repo: github

Just a short post today.

Tailwind CSS is in about half of the React/Javascript job postings I see for New York. I'm getting ready to put together a Firebase project using Tailwind and wanted to first go through a configuration of it.

Tailwind is essentially a large library of pre-made CSS classes that suits many needs. Their goal is to allow you to write applications without having to write custom CSS.

When the application is compiled, Webpack or another bundler tool creates a CSS file for your project based on the classes you used.

On the recommendation of a blogger I revere, I followed this simple Tailwind project (link here).

One of the main noted problems with Tailwind is that the CSS file it generates on compile is pretty large- up to 3000 lines long, which can drag down page load times.

I also installed the package purgecss in order to get rid of any CSS that is for classes that aren't being used in the html/JSX for a smaller, lighter weight project.

Top comments (2)

Collapse
 
bam92 profile image
Abel Lifaefi Mbula

What great ambition! Congratulations.

Collapse
 
jwhubert91 profile image
James Hubert

Thanks very much Abel!