Tailwind-Css, como funciona e sua aplicação no React:

O Tailwind CSS é um framework de CSS altamente personalizável e de baixo nível que pode ajudar os desenvolvedores a criar rapidamente interfaces de usuário responsivas e estilizadas em seus projetos. Anteriormente viemos falando muito sobre as diversas bibliotecas existentes para estilização, e hoje falaremos sobre sse framework que pode nos ajudar. Neste artigo, vamos explorar como integrar o Tailwind CSS no React e fornecer alguns exemplos de código para ajudar a iniciar seu projeto.

Como instalar o Tailwind Css -

A primeira etapa para usar o Tailwind CSS em um projeto React é instalá-lo. Existem várias maneiras de fazer isso, mas a mais comum é através do gerenciador de pacotes npm. Abra um terminal na pasta do seu projeto React e execute o seguinte comando:

npm install tailwindcss

yarn add tailwindcss

Logo após, iniciamos o projeto dando: npm tailwindcss init

Mas antes precisamos unificá-lo ao React:

npm install postcss postcss-cli autoprefixer

Feito isso,configuramos as seguintes raízes do projeto:

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

Depois de iniciar o projeto, em uma pasta separada destinada ao css, estilização, colocamos o seguinte:

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

Finalmente, importe o arquivo index.css em nosso arquivo index.js:

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

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

Finalizando, basta começar a estilizar os componentes a vontade.

Exemplos de códigos -

Depois de tantas instalações, como fica de fato uma estilização feita em TaiwinndCSS? No próprio site, nos é deixado o seguinte exemplo de código um template de compras de uma loja:

<div class="flex font-sans">
  <div class="flex-none w-48 relative">
    <img src="/classic-utility-jacket.jpg" alt="" class="absolute inset-0 w-full h-full object-cover" loading="lazy" />
  </div>
  <form class="flex-auto p-6">
    <div class="flex flex-wrap">
      <h1 class="flex-auto text-lg font-semibold text-slate-900">
        Classic Utility Jacket
      </h1>
      <div class="text-lg font-semibold text-slate-500">
        $110.00
      </div>
      <div class="w-full flex-none text-sm font-medium text-slate-700 mt-2">
        In stock
      </div>
    </div>
    <div class="flex items-baseline mt-4 mb-6 pb-6 border-b border-slate-200">
      <div class="space-x-2 flex text-sm">
        <label>
          <input class="sr-only peer" name="size" type="radio" value="xs" checked />
          <div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
            XS
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="s" />
          <div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
            S
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="m" />
          <div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
            M
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="l" />
          <div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
            L
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="xl" />
          <div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
            XL
          </div>
        </label>
      </div>
    </div>
    <div class="flex space-x-4 mb-6 text-sm font-medium">
      <div class="flex-auto flex space-x-4">
        <button class="h-10 px-6 font-semibold rounded-md bg-black text-white" type="submit">
          Buy now
        </button>
        <button class="h-10 px-6 font-semibold rounded-md border border-slate-200 text-slate-900" type="button">
          Add to bag
        </button>
      </div>
      <button class="flex-none flex items-center justify-center w-9 h-9 rounded-md text-slate-300 border border-slate-200" type="button" aria-label="Like">
        <svg width="20" height="20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
        </svg>
      </button>
    </div>
    <p class="text-sm text-slate-700">
      Free shipping on all continental US orders.
    </p>
  </form>
</div>

A imagem acima mostra o resultado do código acima.

Conseguimos ver de maneira simples, como o Tailwind-css cria uma estilização profissional e suas diversas possibilidades. Esse framework normalmente é mais utilizado na web, junto do Reax

Blog

Tailwind-Css, como funciona e sua aplicação no React:

Altencir Junior

Join Our Newsletter. No Spam, Only the good stuff.

Related