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

Installation

  1. Setup the initial directory.
mkdir react-tailwind-postcss && cd $_
npx create-react-app ./ &&
npm install tailwindcss postcss-cli autoprefixer --save-dev &&
npx tailwind init &&
npm audit fix

Setup Configuration Files

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

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

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;

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

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
grobelDev

grobelDev

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

More from Medium

5 hurdles when creating a Spotify app

The Best Web Dev Accounts to Follow on Twitter

Reactime Version 12 Updates

How To Setup React App With Vite & Tailwind Support