Building a Blog Application with React and Tailwind CSS

In this blog post, we'll walk through the process of building a simple blog application using React for the frontend and Tailwind CSS for styling. By the end of this tutorial, you'll have a fully functional blog application where you can create, view, and delete blog posts.

Table of Contents

1. Introduction

2. Setting Up the Project

3. Creating the React Components

4. Styling with Tailwind CSS

5. Adding Functionality

6. Conclusion

Download Now

1. Introduction

React is a popular JavaScript library for building user interfaces, and Tailwind CSS is a utility-first CSS framework that allows you to quickly style your applications. Combining these two technologies can help you build modern, responsive, and visually appealing web applications with ease.

In this tutorial, we'll create a simple blog application that allows users to:

• View a list of blog posts.

• Add a new blog post.

• Delete a blog post.

2. Setting Up the Project

First, let's set up a new React project using create-react-app and install Tailwind CSS.

Step 1: Create a New React Project

Open your terminal and run the following command to create a new React project:

npx create-react-app blog-app
cd blog-app

Step 2: Install Tailwind CSS

Next, install Tailwind CSS and its dependencies:

npm install tailwindcss postcss autoprefixer

Step 3: Configure Tailwind CSS

Initialize Tailwind CSS by running:

npx tailwindcss init

This will create a tailwind.config.js file in your project. Open this file and configure the content property to include all your React components:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 4: Add Tailwind to Your CSS

Create a src/index.css file and add the following Tailwind directives:

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

Then, import this file in your src/index.js:

import './index.css';

3. Creating the React Components

Now that our project is set up, let's create the necessary React components for our blog application.

Step 1: Create the Post Component

Create a src/components/Post.js file:

import React from 'react';

const Post = ({ post, onDelete }) => {
  return (
    <div className="bg-white p-6 rounded-lg shadow-lg mb-4">
      <h2 className="text-2xl font-bold mb-2">{post.title}</h2>
      <p className="text-gray-700">{post.content}</p>
      <button
        onClick={() => onDelete(post.id)}
        className="mt-4 bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
      >
        Delete
      </button>
    </div>
  );
};

export default Post;

Step 2: Create the PostList Component

Create a src/components/PostList.js file:

import React from 'react';
import Post from './Post';

const PostList = ({ posts, onDelete }) => {
  return (
    <div>
      {posts.map((post) => (
        <Post key={post.id} post={post} onDelete={onDelete} />
      ))}
    </div>
  );
};

export default PostList;

Step 3: Create the AddPost Component

Create a src/components/AddPost.js file:

import React, { useState } from 'react';

const AddPost = ({ onAdd }) => {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    onAdd({ title, content });
    setTitle('');
    setContent('');
  };

  return (
    <form onSubmit={handleSubmit} className="mb-8">
      <input
        type="text"
        placeholder="Title"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        className="w-full p-2 mb-2 border rounded"
        required
      />
      <textarea
        placeholder="Content"
        value={content}
        onChange={(e) => setContent(e.target.value)}
        className="w-full p-2 mb-2 border rounded"
        required
      />
      <button
        type="submit"
        className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
      >
        Add Post
      </button>
    </form>
  );
};

export default AddPost;

4. Styling with Tailwind CSS

Tailwind CSS makes it easy to style your components using utility classes. In the components above, we've already added some Tailwind classes to style the buttons, inputs, and post cards.

5. Adding Functionality

Now, let's add the functionality to our blog application by managing the state of the posts.

Step 1: Manage State in App.js

Open src/App.js and update it with the following code:

import React, { useState } from 'react';
import PostList from './components/PostList';
import AddPost from './components/AddPost';

const App = () => {
  const [posts, setPosts] = useState([]);

  const handleAddPost = (newPost) => {
    setPosts([...posts, { ...newPost, id: Date.now() }]);
  };

  const handleDeletePost = (id) => {
    setPosts(posts.filter((post) => post.id !== id));
  };

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-8">My Blog</h1>
      <AddPost onAdd={handleAddPost} />
      <PostList posts={posts} onDelete={handleDeletePost} />
    </div>
  );
};

export default App;

Step 2: Run the Application

Finally, run your application:

npm start

You should now see your blog application running at http://localhost:3000. You can add new posts, view them, and delete them.

6. Conclusion

In this tutorial, we've built a simple blog application using React and Tailwind CSS. We've covered how to set up a React project, create reusable components, style them using Tailwind CSS, and manage state to add and delete blog posts.

This is just the beginning! You can extend this application by adding features like editing posts, adding categories, or even integrating a backend to persist the data.

Happy coding! 🚀

Download Now