How to Build and Style a Login Component on React Using Tailwind.CSS

This week I participated in the Nurture Difference Hackathon, hosted by Cody Green. This was created as a chance for bootcamp grads and alumni to collaborate and create a portfolio level project. This was my first hackathon and I was excited to work on collaborating as it’s been a while since I last paired up to program. My team quickly got to the drawing board, we sketched out features and functionality for our ideas and by the end of the first day created user routes on a Rails Backend which included Authentication, and built out a user login and registration page on the Frontend using React and TailwindCSS for styling.

I generally have a good work flow and approach to styling so I played around with TailwindCSS and used this cheatsheet as a reference and guide for creativity.

So what is TailwindCSS?

It is a useful CSS framework that we can use directly inside of our react code. It’s similar to bootsrap and material ui and semantic ui, but it’s also different. And I won’t get into which is best, this will just be a showcase to what you can potentially do with Tailwind. So let’s get started with instillation. This will be specific for React in JavaScript.

Installing Tailwind CSS inside React App,

If you haven’t already, first create your react app

npx create-react-app my-app
cd my-project

Next install tailwind

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

I did have some issues here. In the command line I received this error message:

zsh: no matches found: postcss@^7

To fix this you need to surround postcss@^7 and autoprefixer@^9 with quotation marks, like so "postcss@^7" and "autoprefixer@^9" . If you ran into the same problem, try running:

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat "postcss@^7" "autoprefixer@^9"

Next if you run npm start you will see the React Logo on the entire screen in a new web browser. Back to your terminal, press control+c then enter[insert name of your app here]. code and go ahead and delete everything in between the main div tags inside of your app.js file as well as the import logo at the top. To make sure your app works, in between the div tags type in Hello World, and then in the terminal run npm start. Your web browser should open up and you should see “Hello World” printed on the very top and to the center of your screen if you left className="App" inside of the div tag. Otherwise “Hello World” would be all the way to the top left. If this works we are set to move on. You can delete the className inside of the div tag.

Back in your terminal, hit control+c and next we are going to install and configure CRACO. This will allow us to override the PostCSS that comes with create React App.

npm install @craco/craco

Go back into your editor and inside of the package.json file, look for where it says:

"scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },

Replace the first three lines, start, build, and test with the following:

+     "start": "craco start",
+     "build": "craco build",
+     "test": "craco test",

Next at the root of your project, create a ‘craco-config.js’ file and inside it put:

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

Next in your terminal, enter: npx tailwindcss init which will create a tailwind.js.config file in your project root. Go into that file where it says purge followed by an empty pair of brackets and paste in the code as seen below:

// tailwind.config.js
  module.exports = {
    purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

Next go into your src/index.css file that got created with the react app, and go ahead and replace everything inside of this file with the following code. This will replace the CSS directives with Tailwind’s styles

@tailwind base;
@tailwind components;
@tailwind utilities;

Next ensure that import ‘./index.css’; is at the top of the index.js file.

IF you’ve gone through the setup of getting tailwind into your project you can move on to building out a login page.

For the sake of this blog I will be creating the Login component in the same directory as the App.js and index.js. Conventionally the file structure is set up in a different way, but I won’t get into that.

In the src folder, create a file and call it “Login.js”, I skip to the end now and will show you the finished code and break down the tailwind styling.