통합 Tailwindcss는 React의 프로젝트입니다.

En mis proyecto de React siempre trabajo con el framework de css Bootstrap, led un diseño único a las aplicaciones. 궁극적으로 Tailwindcss un framework css muy potente y con un build muy ligero pero;como lo integro a mi app de react?

Bueno para eso debemos asumir que ya tenemos nuestra aplicación de react, sino sigue este link Create a New React App

Bien, hecho el anterior paso vamos a integrar tailwindcss a nuestro proyecto


1. tailwindcss 설치

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

postcss-cli y autoprefixer는 tailwindcss의 depedencias depedencias de nuestro proyecto에 설치되지 않습니다. Debemos verificar que dichas dependsencias existan en el archivo package.json de nuestro proyecto.


2.postcss.config.js의 구성

En la raíz de nuestro crearemos un archivo con el nombre de postcss.config.js y dentro copyiaremos este código.

module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

Este archivo le dira a react que requiere de las dependsencia de tailwind y autoprefixer y luego exportarlas.

Si quieres profundizar는 este tema te dejo este 링크를 존중합니다:
Configuracion de postcss.config.js .


3. tailwind.css 생성

Ahorora crearemos un archivo tailwind.css que sera nuestro .css como tradicionalmente conocemos.Es aconsejable crearlo en esta ruta src/assets/tailwind.css y dentro debemos copiar el siguiente código.

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

Note asuste site marca un warning es normal.Dentro de este archivo escribiremos nuestra propia configuración de estilos de componentes,botones,color de fuente, entre otras opciones.En estos link se profundiza más sobre el tema:

Adding-base style
Extracting Component
Adding New Utilities

PD:En este mismo directorio creamos un archivo llamado main.css, lo dejamos vacío,aquí se almacenará la transpilación del código css de tailwindcss.




4. package.json 구성

Configuramos los comandos del package.json para poder ejecutar el npm start o npm run build a producción.La configuración es un poco diferente, ya que tenemos que compilar nuestro código de react conjunto con el de tailwindcss, para eso en el espacio de los script copyiamos estos codigos:

"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },

5.main.css 가져오기.

Ya por último en index.js de nuestro proyecto importaremos el archivo main.css que creamos en el paso 3.

import React from 'react';
import ReactDOM from 'react-dom';
import './assets/main.css';
import App from './App.jsx';

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

App.js는 tailwindcss의 모든 구성 요소를 포함하고 있으며 App.js의 새로운 구성 요소에 대한 추가 정보를 포함하고 있습니다.

테일윈드 css 구성 요소 코드에 대한 링크를 해제하십시오.
Container docs

Una vez hecho las configuraciones ya podemos ejecutar el comando en nuestra terminal npm start y deberá levantar un servidor local con nuestra aplicación.



Con estos 5 pasos puedes tener integrado Tailwindcss a nuestra aplicación de React y asi poder construir poderosos componentes y con diseño brillantes.

Saludos Codificados
이오스바니 알바레즈
풀 스택 개발자