Creating A Simple Website Using React, Tailwind CSS, & PostCSS

Create a simple, multi-page website that watches your CSS changes & refreshes your app, accordingly.

Want to clone the repo? Here’s my GitHub: https://github.com/billimarie/simple-react-tailwind-tutorial

What You Need

  • Terminal / Command Line
  • IDE (I recommend Atom)
  • Node: 8.11.3+
  • npm: 6.12.1+

Part One: Getting Started

$ npx create-react-app react-tailwind-site
$ cd react-tailwind-site
$ npm install react-router-dom tailwindcss autoprefixer postcss-cli
$ npm run start

A new window should open up (localhost:3000) & display the standard new React App screen.

(Having trouble? See Troubleshooting).

Part Two: Setting Up Tailwind & PostCSS

$ npx tailwind init tailwind.config.js
$ cd src ; mkdir css ; cd css ; touch tailwind.css // Linux
$ cd src & mkdir css & cd css & touch tailwind.css // Windows
/* Init Tailwind */
@tailwind base;
@tailwind components;@tailwind utilities;/* Custom CSS */

Part Three: Connecting Tailwind, PostCSS, & React

"scripts": {
"build:css": "postcss src/css/tailwind.css -o src/index.css",
"watch:css": "postcss src/css/tailwind.css -o src/index.css -w",
"start": "npm watch:css & react-scripts start",
"build": "npm run build:css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
import './css/tailwind.css';     /* Replacing App.css */
import './index.css';    /* Replacing App.css */
$ npm run start

You should see an updated localhost:3000 page.

To test that it’s watching your CSS changes, go back to src/css/tailwind.css & add a new style under "Custom CSS." Your app should refresh with the changes automatically:

Automatic reloads after CSS changes.

Part Four: Creating Components

$ mkdir components
$ cd src/components ; touch Header.js // Linux
$ cd src/components & touch Header.js // Windows
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link } from 'react-router-dom';
const Header = () => (
<header className="bg-gray-100 p-6">
<div className="flex items-center justify-between flex-wrap">
<div className="block">
<Link to="/"><span className="font-semibold text-xl tracking-tight text-gray-800">Title Goes Here</span></Link>
</div>
<nav className="block">
<Link to="/"><span className="inline-block text-gray-800 hover:text-gray-600 mr-4">Home</span></Link>
<Link to="/"><span className="inline-block text-gray-800 hover:text-gray-600 mr-4">About</span></Link>
<Link to="/"><span className="inline-block text-gray-800 hover:text-gray-600 mr-4">Contact</span></Link>
<Link to="/"><span className="inline-block px-4 py-2 leading-none border rounded text-gray-600 border-gray-600 hover:text-gray-900 hover:border-gray-900">Login</span></Link>
</nav>
</div>
</header>
);
export default Header;
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from 'react-router-dom';
import Header from './components/Header.js';

Scroll down and replace the content React automatically generated with the following:

const App = () => (
<Router>
<Header />
</Router>
);
export default App;
$ touch Home.js About.js Contact.js

Open Home.js add the following:

import React from 'react';const Home = () => (
<h2>Home</h2>
);
export default Home;

You can reuse this code for your About.js and Contact.js pages.

import Home from './components/Home.js';
import About from './components/About.js';
import Contact from './components/Contact.js';

Scroll down to modify:

<Router>
<Header />
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route exact path="/about">
<About />
</Route>
<Route exact path="/contact">
<Contact />
</Route>
</Switch>
</Router>
import { BrowserRouter } from 'react-router-dom';ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
$ npm run start

You should be able to see the new header, and click on each navigation item to take you to a new page:

Create a simple, multi-page website that watches your CSS changes & refreshes your app, accordingly.

Thanks for reading. If you’re looking for website design & development tips, visit my Medium publication, Clocktwine.

Need Unlimited Design, Development, or Hosting for your Website?

Unlimited Web Design, Development, Hosting

Check out Clocktwine.com to schedule a free consultation for how to improve your website.

Clocktwine

Unlimited Design, Development, & Hosting for your Website

Billimarie Lubiano Robinson

Written by

Billimarie is a human that's trying to make the most of this transient existence we call life. www.typewriterpoetry.com www.billimarie.com

Clocktwine

Unlimited Design, Development, & Hosting for your Website

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade