Tutorial React Login with Tailwind CSS | 2022

Learn how to create a beautiful and responsive login screen using React and Tailwind CSS. You'll learn how to set up a new React app, installing and configuring Tailwind CSS, and building a split-screen layout with a form on the left and a stylish gradient sphere on the right.

The tutorial is perfect for developers who want to get more comfortable with Tailwind CSS, including responsive design, animations, gradients, and blur effects. It also demonstrates practical React component structure and styling best practices.

What's inside

• Creating a new React app with Create React App
• Installing and configuring Tailwind CSS in the project
• Setting up the main layout with responsive flexbox and screen division
• Building a reusable form component with inputs for email and password
• Styling the right side with a gradient blurred sphere and responsive visibility
• Applying responsive design principles starting from mobile-first
• Adding hover and press animations to buttons using Tailwind utilities
• Restarting the development server to apply Tailwind config changes

Creating a new React app with Create React App

I start by creating a new React project using the command create-react-app login-tailwind-tutorial. If you don't have the CLI installed globally, you need to run npm install -g create-react-app first. After the project is created, open it in Visual Studio Code with code . and start the development server using npm start. This sets up the basic React environment for the login page.

Installing and configuring Tailwind CSS in the project

Next, Tailwind CSS is installed by copying the official install command from codewithbeto.dev and running it in the terminal. Then, the Tailwind config files are generated with npx tailwindcss init -p. The tailwind.config.js file is edited to include the content paths for all JavaScript and TypeScript files inside the src folder, so Tailwind can purge unused styles. Finally, Tailwind’s base, components, and utilities directives are added to the index.css file to enable its styles globally.

Setting up the main layout with responsive flexbox and screen division

The main app layout uses a flex container with full width and height of the screen. It divides the screen into two halves on large screens: the left side for the login form and the right side for the decorative sphere. On smaller screens, the left side takes full width and the right side is hidden. Tailwind classes like flex, w-full, h-screen, lg:w-1/2, hidden lg:flex, items-center, and justify-center are used to achieve this responsive split layout.

Building a reusable form component with inputs for email and password

A new folder components is created with a Form.js file exporting a React functional component. This component returns a div with placeholder text initially, which is imported and rendered inside the main app. This modular approach keeps the form code separate and reusable. Later, inputs for email and password will be added inside this form component.

Styling the right side with a gradient blurred sphere and responsive visibility

The right side contains a div styled as a 60x60 size circle with a gradient background from violet to pink, using Tailwind classes like bg-gradient-to-tr, from-violet-500, to-pink-500, and rounded-full. This sphere is centered vertically and horizontally inside its container. It is hidden on mobile (hidden) and only shown on large screens (lg:flex). This adds a modern visual effect to the login page.

Applying responsive design principles starting from mobile-first

I emphasize starting styles for mobile screens first, then adding modifiers for larger screens. For example, the form container uses w-full for mobile and lg:w-1/2 for desktop. The right side sphere is hidden on mobile and shown on large screens. This mobile-first approach ensures the login page looks good on all devices without extra overrides.

Adding hover and press animations to buttons using Tailwind utilities

Buttons in the form have interactive animations: on hover, they animate with subtle effects, and on press, they shrink slightly. These animations are done purely with Tailwind CSS utility classes, demonstrating how to add smooth UI feedback without custom CSS or JavaScript. This improves user experience and polish.

Restarting the development server to apply Tailwind config changes

After configuring Tailwind CSS, the development server must be restarted to apply the new styles. I show stopping the server with Ctrl+C, clearing the terminal, and running npm start again. This step is essential because Tailwind’s JIT compiler needs to reload the config files to generate the correct CSS.

Resources

YouTubeTutorial React Login with Tailwind CSS | 2022

Step-by-step React login page with Tailwind CSS, responsive design, and animations.

CourseReact (web) course

Learn React fundamentals and build real web apps with modern tools and styling.