# Lesson 3 - CSS Review
## Styling UI with CSS Framework
## **What is Bootstrap?**
* **Front-end Framework:** Bootstrap is a popular and open-source CSS framework that provides pre-built HTML, CSS, and JavaScript components for building responsive and mobile-first web applications.
* **Key Features:**
* **Grid System:** A flexible and responsive grid system for creating layouts that adapt to different screen sizes.
* **Pre-built Components:** A wide range of pre-styled components like buttons, forms, navigation bars, alerts, carousels, and more.
* **Utilities:** A collection of utility classes for quickly applying styles like margins, padding, colors, and text styles.
* **JavaScript Plugins:** Includes JavaScript plugins for interactive components like modals, tooltips, popovers, and more.
* **Responsive Design:** Designed with mobile-first principles in mind, Bootstrap components adapt seamlessly to various screen sizes.
## Installing and Using Bootstrap in Vite
**Step 1: Install Bootstrap**
1. Install Bootstrap using npm:
```bash
npm install bootstrap
//or
yarn add bootstrap
```
**Step 2: Include Bootstrap CSS and JavaScript in Vite**
1. In the `main.jsx` file, import Bootstrap's CSS:
//main.jsx
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
2. Bootstrap's JavaScript is bundled with Vite automatically.
***
## Use Cases of Bootstrap Components
**Div Example:**
```jsx
Hello Bootstrap
```
**Paragraph Example:**
```jsx
This is a muted paragraph.
```
**Anchor Example:**
```jsx
Click Me
```
**Image Example:**
```jsx
```
**Input Example:**
```jsx
```
**Button Example:**
```jsx
```
**Form Example:**
```jsx
```
**Navbar Example:**
```jsx
```
### **Benefits of Using Bootstrap**
* **Faster Development:** Bootstrap provides pre-built components and a robust grid system, accelerating the development process.
* **Responsive Design:** Ensures your website looks good on all devices.
* **Cross-browser Compatibility:** Tested and works across major browsers.
* **Large Community:** A large and active community provides support, resources, and extensions.
**In Summary**
Bootstrap is a powerful tool for front-end developers. By leveraging its pre-built components, grid system, and customization options, you can quickly and efficiently create visually appealing and responsive web UIs.
## Tailwind CSS with Vite
### **What is Tailwind CSS?**
Tailwind CSS is a utility-first CSS framework that allows developers to create modern and responsive designs efficiently. Instead of pre-designed components, Tailwind provides low-level utility classes that enable custom styling while maintaining consistency and scalability.
### **Why Use Tailwind CSS?**
* **Utility-First Approach**: Allows for rapid UI development.
* **Customizability**: Tailwind is highly configurable and can be customized to fit project needs.
* **Performance**: Generates only the necessary CSS, making applications faster.
* **Responsive Design**: Includes responsive utilities to design mobile-friendly interfaces.
***
## **Step-by-Step Installation Guide for Tailwind CSS in a Vite React App**
### **Step 1: Create a Vite + React Project**
**ref site :** [**https://tailwindcss.com/docs/guides/vite**](https://tailwindcss.com/docs/guides/vite)
Before installing Tailwind CSS, you need to have a Vite React project. If you don’t have one, create it using the following command:
```bash
npm create vite@latest tailwind-css-app -- --template react
```
Navigate into your project directory:
```bash
cd tailwind-css-app
```
Install dependencies:
```bash
npm install
```
***
#### **Step 2: Install Tailwind CSS and Dependencies**
T
Initialize the Tailwind configuration files:
Install Tailwind CSS Vite plugin along with its necessary dependencies, run the following command:
```bash
npm install --save-dev @tailwindcss/vite
```
* vite.config.js : Modify your `vite.config.js` file to include the Tailwind CSS Vite plugin:
```javascript
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [react(), tailwindcss()],
});
```
**Verify Tailwind CSS installation:** Make sure you've also installed Tailwind CSS itself and generated the configuration files:
```bash
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
```
This command will install the following:
* The Tailwind CSS framework
* Post CSS, which provides plugins to perform different functionalities like prefixes in Vanilla CSS
* Autoprefixer, which is a PostCSS plugin to parse CSS and add vendor prefixes to CSS rules
### Generate the Configuration Files
```
// Some code
npx tailwindcss init -p
```
This command generates `tailwind.config.cjs` and`postcss.config.cjs` configuration files, also known as config files. They help you interact with your project and customize everything.
### **Step 3: Configure Tailwind to Purge Unused Styles**
Modify `tailwind.config.js` to specify the paths to all template files:
```jsx
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}"
],
theme: {
extend: {},
},
plugins: [],
};
```
This configuration ensures Tailwind CSS removes unused styles in production, making the CSS file smaller and more optimized.
***
### **Step 4: Add Tailwind CSS to Your Stylesheet**
In your `src` folder, locate `index.css` (or create one if missing) and include the Tailwind directives at top:
```css
/* src/styles.css */
@import "tailwindcss";
```
These directives import Tailwind's base styles, components, and utility classes.
These three lines act as directives that tell Tailwind to inject its different style layers into your CSS, enabling you to use its pre-defined styles and utility classes throughout your project. They must be present in your main CSS file (usually `index.css`) for Tailwind to function.
***
### **Step 5: Use Tailwind CSS in Your React Components**
Now, you can start using Tailwind classes directly in your React components. For example, modify `App.jsx`:
```jsx
function App() {
return (
Hello, Tailwind CSS with Vite!
This is styled using Tailwind in a Vite React app.
);
}
export default App;
```
***
Challenge:
```
CHALLENGE: Style the menu to look like the mockup
- Position and place the menu in the center of the viewport using Flexbox
- Using Flexbox, center-align and space the menu contents
- Display and space the 3 price-points side by side
- Display and space the Extras side by side, wrapping if needed.
- Size the titles
```
```jsx
// App.jsx - updated
import './App.css'
function App() {
return (
<>
Hello, Tailwind CSS with Vite!
This is styled using Tailwind in a Vite React app.
Coffee
Cappuccino
$3.60 (S)
$4.20 (M)
$5.00 (L)
Flat White
$3.60 (S)
$4.20 (M)
$5.00 (L)
Latte
$3.60 (S)
$4.20 (M)
$5.00 (L)
Extras ($3ea)
Cream
Wafer
Shortbread
Marshmellow
Chocolate square
Cinnamon Stick
)
}
export default App
```
```jsx
// snippet of App.jsx
```
#### Explanation:
* `w-1/2`: Sets the width of the `` element to half of its parent container.
* `mx-auto`: Centers the element horizontally by setting automatic margins on the left and right.
* `f``lex`, `flex-col`, `items-center`, `justify-center`: These classes ensure that the content inside the `` element is centered both vertically and horizontally.
This setup will ensure that the `` element is centered and takes up half the width of its parent container.
References
App.jsxAppGPT-4o⇧⏎ New Line⏎ Send
### **Step 6: Start the Development Server**
To see your Tailwind-styled app in action, run the Vite development server:
```bash
npm run dev
```
This will start your application at `http://localhost:5173/` (or another available port).
***
### **Comparison and Best Practices:**
* **Tailwind CSS:**
* Utility-first framework, customizable, better for fully custom designs.
* Requires adding classes directly to HTML elements.
* **Bootstrap:**
* Component-based, comes with pre-styled components, great for rapid prototyping.
* Ideal when you need a quick layout with minimal custom styling.
### **Conclusion**
You have successfully set up Tailwind CSS in your Vite-powered React application! Now, you can utilize Tailwind’s utility classes to build modern, responsive, and maintainable UIs with ease.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://reactjs.koida.tech/react-in-the-beginning/lesson-3-css-review.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.