TailwindCSS with React.js (pt. 1)

Photo by Greg Rakozy on Unsplash

A popular utility-first CSS framework that makes it easy for web developers to build responsive websites. I have been using this recently for my React.js applications and my portfolio site. One of the neat things about using Tailwind is that you can stay within your markup files to apply your styling. The configuration file grants you the option of changing default animations, managing screen size modifications, and more. Recently they’ve added support for dark mode (yay!). Lastly, it won’t overload your website once released for production due to its small size.

Installation

Using npm, enter this in the terminal to install TailwindCSS:

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Next, we’re going to need Craco to override the default or native CSS configurations.

npm install @craco/craco

Configuration Files

After Craco’s been installed, you’re going to have to modify your package.json file like so:

{
// ...
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
"eject": "react-scripts eject"
},
}

A Craco config file will then be created so that TailwindCSS can be plugged in.

// craco.config.js
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}

Another config file will be created specifically for Tailwind with this command:

npx tailwindcss init

Depending on what you need, there can be a lot to configure using Tailwind so make sure to read the documentation.

This is currently what my tailwind.config.js file looks like for a recent freelance work that I did:

Customized for screen size responsiveness.

I made the front-end mobile responsive by making sure that the styles are available for all screen sizes. I included large display sizes as well in case a user has a wider resolution screen. Once more displays come out, an additional ‘xl’ will have to be included.

I plan on adding a dark mode accessibility feature as well. Since it recently came out (and I just started using it) then it will be added onto the configuration file and then added into my styles for each component.

Next post, I’ll be showing how to use the framework with your React components! There’s a lot that you can do with Tailwind to avoid common CSS mistakes.

Read Part 2 Here!

Junior full stack developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store