Setup Tailwind with PostCSS in Create-React-App in 5 Minutes

grobelDev
3 min readDec 24, 2019

Featuring monolithic blocks of shell commands.

Installation

  1. Setup the initial directory.
mkdir react-tailwind-postcss && cd $_

2. Install the necessary packages.

npx create-react-app ./ &&
npm install tailwindcss postcss-cli autoprefixer --save-dev &&
npx tailwind init &&
npm audit fix

Setup Configuration Files

3. Run this block of commands in your project directory from the terminal.

touch postcss.config.js &&
mkdir -p ./src/styles &&
touch ./src/styles/tailwind.css &&
rm src/App.test.js src/App.css src/index.css src/logo.svg src/serviceWorker.js &&
echo -e "@tailwind base;\n@tailwind components;\n@tailwind utilities;" > ./src/styles/tailwind.css &&
echo -e "module.exports = {" > ./postcss.config.js &&
echo -e " plugins: [require('tailwindcss'), require('autoprefixer')]" >> ./postcss.config.js &&
echo -e "};" >> ./postcss.config.js
echo -e "import React from 'react'" > ./src/index.js &&
echo -e "import ReactDOM from 'react-dom'" >> ./src/index.js &&
echo -e "import './styles.css'" >> ./src/index.js &&
echo -e "import App from './App'\n" >> ./src/index.js &&
echo -e "ReactDOM.render(<App />, document.getElementById('root'));" >> ./src/index.js &&
echo -e "import React from 'react'\n\nexport default function App() {" > ./src/App.js &&
echo -e " return (" >> ./src/App.js &&
echo -e " <div className='text-4xl font-bold text-center text-blue-500'>" >> ./src/App.js &&
echo -e " Hello World" >> ./src/App.js &&
echo -e " </div>\n );\n}" >> ./src/App.js

4. Replace the ‘scripts’ section in your package.json with the following.

package.json

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:styles": "postcss src/styles/tailwind.css -o src/styles.css",
"prebuild": "npm run build:styles",
"prestart": "npm run build:styles"
},

3. Setup Some Boilerplate

Done! Tailwind should now be successfully installed.

At this point, npm start should output a simple ‘Hello World’ text:

Try running the app to see the result.

But if you want something a bit flashier, here’s a different App.js file to try:

App.js

import React from 'react';function App() {
return (
<div>
<div className='py-8'></div>
<div className='flex justify-center'>
<div className='md:flex'>
<div className='md:flex-shrink-0'>
<img
className='rounded-lg md:w-56'
src='https://i.imgur.com/KVarsC2.png'
alt='Tailwind CSS Logo'
/>
</div>
<div className='flex flex-col justify-center'>
<div className='mt-4 md:mt-0 md:ml-6'>
<div className='text-sm font-bold tracking-wide text-indigo-600 uppercase'>
Setup Guide
</div>
<div className='block mt-1 text-lg font-semibold leading-tight text-gray-900'>
Tailwind CSS with PostCSS in
</div>
<div className='block mt-1 text-lg font-semibold leading-tight text-gray-900'>
Create-React-App Setup in 5 Minutes
</div>
<p className='mt-2 text-gray-600'>
Featuring monolithic blocks of shell commands
</p>
</div>
</div>
</div>
</div>
</div>
);
}
export default App;

The end result should look like this.

The completed repo can be found here:

Thanks for reading!

--

--

grobelDev

If you’re interested in more stuff that I’ve written, you can find them at https://grobel.dev/articles. Thanks for reading.