React Tailwind CSS

Usar Tailwind CSS en un proyecto de React es una opción muy popular, porque proporciona un método de utilidades primero para escribir CSS, lo que te permite aplicar estilos directamente en los nombres de clase. Este método hace que la escritura de estilos sea más concisa e intuitiva.

Tutorial de Tailwind CSS:https://www.example.com/tailwindcss/tailwindcss-tutorial.html

Sitio web oficial de Tailwind CSS:https://tailwindcss.com/

Dirección de Github:https://github.com/tailwindlabs/tailwindcss

Tailwind CSS es un potente framework de CSS que, a través de un método de utilidades primero, hace que la escritura de estilos sea más concisa y modular. A diferencia de los frameworks CSS tradicionales basados en clases, Tailwind proporciona un conjunto de clases de utilidad de bajo nivel que se pueden usar directamente en los elementos HTML para construir diseños personalizados de manera rápida y flexible.

A continuación se muestran los pasos detallados para usar Tailwind CSS en un proyecto de React.

1. Instalar Tailwind CSS

Si estás creando un nuevo proyecto de React desde cero, puedes usar create-react-app. Si ya tienes un proyecto de React existente, puedes omitir el paso de creación del proyecto.

Crear un nuevo proyecto de React:

npx create-react-app my-app
cd my-project

Instalar Tailwind CSS

En el directorio de tu proyecto, ejecuta el siguiente comando para instalar Tailwind CSS y sus dependencias necesarias:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Esto creará un archivo tailwind.config.js y un archivo postcss.config.js.

La estructura de tu proyecto debería ser similar a la siguiente:

my-app/
├── node_modules/
├── public/
├── src/
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   └── ...（其他文件）
├── .gitignore
├── package-lock.json
├── package.json
├── postcss.config.js
└── tailwind.config.js

2. Configurar Tailwind CSS

Edita el archivo tailwind.config.js para configurar Tailwind y eliminar estilos no utilizados. Actualiza el arreglo content para incluir todas las rutas de tus archivos de plantilla:

Ejemplo

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

3. Agregar los estilos base de Tailwind

En tu proyecto, abre el archivo src/index.css y agrega el siguiente contenido para incluir los estilos base, los estilos de componentes y los estilos de utilidades de Tailwind:

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

4. Usar Tailwind CSS para escribir estilos

Ahora puedes comenzar a usar los nombres de clase de Tailwind CSS en tus componentes de React para escribir estilos.

Código del archivo App.js:

import React from 'react';

const App = () => {
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
<div className="bg-white p-8 rounded-lg shadow-lg">
<h1 className="text-2xl font-bold text-gray-900">Hello, EJEMPLO!</h1>
<p className="mt-4 text-gray-600">Tutorial de novatos, ¡no solo se aprende tecnología, sino también sueños!</p>
<button className="mt-6 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
Haz clic para probar
</button>
</div>
</div>
);
};

export default App;

Asegúrate de que tu archivo src/index.js importe correctamente el componente App y lo renderice en el DOM.

Código del archivo src/index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

Ejecutar:

npm start

Luego abre tu navegador y navega a http://localhost:3000. Deberías ver una aplicación simple de React con estilos de Tailwind CSS.

Con los pasos anteriores, has integrado Tailwind CSS correctamente en tu proyecto de React y lo has usado para escribir estilos. Los nombres de clase de utilidad de Tailwind CSS te permiten agregar estilos a tus componentes rápidamente, manteniendo el código de estilos conciso y modular.

Otras extensiones

React Proyecto práctico