How to configure Create-React-App to use TailwindCSS

July 23, 2019 4 min read1352

Recently, I tried using TailwindCSS in a React project bootstrapped by the Create-React-App (CRA) boilerplate and ran into difficulties setting up TailwindCSS as CRA abstracts configuration. To make custom configurations, we would have to eject Create-React-App to have full access to tinker with the configurations, which also means a much more tedious setup and should anything break…you’re on your own. I tinkered with it a bit and found a better way to get it done.

In this post, I will be showing an easy way to make TailwindCSS work inside your react CRA project without having to eject Create-React-App.

What we’ve just done is we gave the div a width of 100% with w-full , we also set the max-width with max-w-md for medium screens and larger.

We gave the form a white background with bg-white and gave it a border-radius to achieve the curved borders with border, px-8 and py-8 adds a padding of 8px to the x-axis and y-axis respectively while pt-8 adds a padding of 8px to the top of the form.

We added font-size of .875rem to the label element with text-sm and made the element have a display of block and set the font-weight to a value of 700 with font-bold.

On the input element, we gave the element some box-shadow with shadow and used .appearance-none to reset any browser-specific styling on the input element.

We added a line-height of 1.25 with leading-tight and used the pseudo-class focus to remove browser-specific outlining of the focused input element with focus:outline-none and added a bit of box-shadow with focus:shadow-outline.

You should get a result similar to this.

﻿

Conclusion

In this post, we’ve learned how to configure Create-React-App (CRA) to use TailwindCSS.
Tailwind has awesome documentation. Check it out for more information.
You can also check out the repository to this tutorial on GitHub to scaffold your app.

LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.