08 Aug 2020

ReactJS, Volume 3

Conventional CSS

To add some CSS styles to the Header component we added in the last post, open up the App.css file and delete all of its content. It's okay, it pertains to the App component boilerplate code which we deleted already.

Let's add a new CSS class .app-header to the file.

.app-header{
  font-weight: bold;
  border-bottom: 1px solid black;
  padding: 0.5rem;
}

Then we need to add this class to our JSX tag in the Header component.

Like so,

function Header(){
    return (
        <header className='app-header'>
            GalleryApp
        </header>
    )
}

After the browser hot-reloads,

That's a lot more palatable, yes?

CSS Framework

Working with conventional CSS might become cumbersome after some time, which is why we will be using a CSS Framework.

Enter Tailwindcss, a Javascript configurable CSS framework.

Installation

yarn add tailwindcss

Add Tailwind

  • Let's remove the App.css file, I will explain why later.
  • In the index.css, replace the existing content with the following:
@tailwind base;

@tailwind components;

@tailwind utilities;

Like so,

Your app is probably failing to compile now, complaining about the missing App.css.

Don't panic.

This is happening because we are still referencing the deleted file in our App.js file. Just remove the following line from that file.

import './App.css';

Create Tailwind config file

npx tailwind init

This will create a tailwind.config.js in the project root.

Process CSS with PostCSS

The browser needs to be served CSS files. To build the CSS that will be served we will be using PostCSS.

  • Create a postcss.config.js in the project root and paste the following content.
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

The package.json file is a good way to check what packages we have installed and currently it is telling us that the postcss package is not installed.

  • Remedy this by installing it with yarn.
yarn add postcss-cli

  • Finally let's install autoprefixer because it is mentioned as a dependency in the postcss/config.js file.
yarn add autoprefixer

Editing the build script

In the package.json file look for the scripts key. It houses the cli commands available to us.

Let's add two more to this list.

"build:css": "postcss src/index.css -o src/tailwind.css",
"watch:css": "postcss src/index.css -o src/tailwind.css -w",

Your package.json should look like this.

Let's try running the build:css command.

yarn build:css

A tailwind.css file has been created under the src directory. Hurray!

Let's edit our index.js file to load CSS from the newly created CSS file.

Replace

import './index.css';

with

import './tailwind.css';

We would want the CSS to be built every time we start serving our project. Let's edit the start and build commands.

"start": "yarn build:css && react-scripts start",
"build": "yarn build:css && react-scripts build",

Now, if we start out app with yarn start, we can see that the CSS is also being built.

Tailwind's classes

Let's actually try using the classes provided by Tailwind now.

In our Header.js file, replace the app-header class with the following.

<header className='border-b font-bold p-3'>
    GalleryApp
</header>

The browser will hot-reload, rendering:

Note: Refer tailwind's documentation for more of what you can do.

Footer.js

Now that we have a respectable header, let's move on to building a footer. A footer is of course just another component.

  • Create a Footer.js file in the Components dir.
import React from 'react'

function Footer(){
    return (
        <footer className='bg-grey-200 text-center text-xs p-3 absolute bottom-0 w-full'>
            &copy; Copyright 2020
        </footer>
    )
}

export default Footer
  • Edit the app.js file to include the newly created footer.
import Footer from './Components/Footer'

And

<div>
    <Header />
    <Footer />
</div>

And you have:

Click here to go to the next post. We add a navigation menu there.