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

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:

grobelDev/react-tailwind-postcss

Thanks for reading!