Creating a Website with React and Tailwind CSS

Prerequisites:

• Node: https://nodejs.org/en/download

Verify node and npm package manager are installed: node -v and npm -v respectively.

1. Create React project

npx create-react-app my-website

Note that create-react-app is just one way of creating a React project. However, it is recently deprecated and not updated by its creators anymore. Other tools like Vite, NextJS, and Remix are recommended for future projects. I will go into them in future posts, but for now I will use create-react-app.

https://create-react-app.dev/

2. Add Tailwind dependencies

npm install -D tailwindcss

The command npm install -D tailwindcss installs the Tailwind CSS library as a development dependency in a Node.js project using npm (Node Package Manager).

Let’s break down the command:

• npm install is the command used to install packages in a Node.js project.
• -D or --save-dev flag tells npm to save the package as a development dependency in the project's package.json file. Development dependencies are packages required during the development process, such as build tools or testing libraries, but not needed in the production environment.
• tailwindcss is the package name for the Tailwind CSS library.

When you run this command in your project’s directory, npm will fetch the latest version of Tailwind CSS from the npm registry and install it in the node_modules directory of your project. It will also add an entry for Tailwind CSS in the devDependencies section of your project's package.json file, along with its version number.

After installing Tailwind CSS, you can use it in your project by importing it in your CSS or JavaScript files, depending on your setup. Typically, you will need to create a configuration file (often named tailwind.config.js) to customize and configure Tailwind CSS according to your project's requirements.

Keep in mind that npm install -D tailwindcss only installs Tailwind CSS as a development dependency. If you want to use Tailwind CSS in your production environment, you will need to include the necessary CSS or JavaScript files generated by Tailwind CSS in your build process or serve them from a CDN.

• italics courtesy of ChatGPT

In the React project’s root directory, we see the tailwindcss dependency in devDependencies in the package.json file:

./package.json

Run npx tailwindcss init to create the Tailwind CSS config file: tailwind.config.js:

https://tailwindcss.com/docs/guides/create-react-app

Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file

If there are some warnings associated with the 3 new lines in VS Code, you can install the PostCSS Language Support extension:

VS Code src/index.css

3. Run the React project

npm run start

This compiles and runs the React project locally.

To edit, open another Terminal (on Mac) with Cmd + t or open the project using a text editor like VS Code. I like using vi on unix-based systems; notepad can be used for Windows command lines.

Start using Tailwind CSS classes in your project

App.js ( src/App.js ):

// App.js
import React from 'react';

function App() {
  return (
    <div className="bg-gray-200 h-screen flex items-center justify-center">
      <div className="bg-white p-8 shadow-lg rounded-lg">
        <h1 className="text-3xl font-bold mb-4">Welcome to My Website!</h1>
        <p className="text-lg">
          This is a sample React app styled with Tailwind CSS.
        </p>
        <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4">
          Get Started
        </button>
      </div>
    </div>
  );
}

export default App;

no CSS styling

Tailwind CSS styling

Source: https://tailwindcss.com/docs/guides/create-react-app