proyectoreact01's Introduction

React & Vite First Project

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

[@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
[@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

Create the Project

The following command is going to create the project.
Then just answer the different questions generated by the script to complete the process of creation

npm init vite@latest

Start the Server

npm run dev

TailwindCSS

Installation

npm i -D tailwindcss postcss autoprefixer

Configuration

Step 01

The following command will create two config files: tailwind.config.js and postcss.config.js

npx tailwindcss init -p

Step 02

Look for the file src/index.css that was created by vite and add the following commands

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

Step 03

Open the file named tailwind.config.js that was created in the first step, and change it with the following content

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.jsx"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Deployment Netlify

Modify configuration file

Modify tailwind.config.js

Previews State

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

New State

Originally was using the keyword of purge instead of content, but this was modified since tailwind 3.0

/** @type {import('tailwindcss').Config} */
export default {
  content: ["index.html", "./src/**/*.jsx"],
  theme: {
    extend: {},
  },
  plugins: [],
}