¿Cómo diseñar enlaces href en React usando Tailwind CSS?

En este artículo, aprenderemos cómo podemos diseñar un enlace href en Reactjs. Dado que usamos Tailwind CSS, Tailwind CSS se describe a sí mismo como el primer marco CSS aplicable. En lugar de centrarse en el rendimiento de un objeto de estilo, Tailwind se centra en cómo debe mostrarse. Esto facilita que el desarrollador explore nuevos estilos y transforme la estructura. El primer marco de CSS utilizado lleno de clases como flex, pt-4, text-center y giratorio-90 se puede diseñar para crear cualquier diseño, directamente en sus templos. 

Acercarse:

1. Crear una aplicación React-react
2. Instalar Tailwind CSS
3. Cree algunas etiquetas de anclaje en App.js y dé clases de utilidad

Algunas clases de utilidad para diseñar enlaces href:

• subrayar: subraya el texto
• hover:underline: se subraya cuando se desplaza
• text-color-value: define el color del texto, por ejemplo, el color azul oscuro text-blue-800

Crear una aplicación React-react 

npx create-react-app my-app

cd my-app

Instale Tailwind CSS: Instale Tailwind CSS en su aplicación de reacción ejecutando los siguientes comandos

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init

Ahora verá un archivo tailwind.config.js creado, pegue estos códigos en su tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Agregue las directivas Tailwind a su CSS: agregue las directivas @tailwind para cada una de las capas de Tailwind a su archivo ./src/index.css.

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

Estructura del proyecto: el directorio de su proyecto se verá así.

Directorio de proyectos

Finalmente, cree algunas etiquetas de anclaje dentro de su App.js 

<div className="absolute left-96 top-52">
      <a
        className="underline text-blue-600
                   hover:text-rose-900 
                   visited:text-rose-700"
        href="#">
        Click me
      </a>
      <br />
      <a
        href="#"
        className="underline hover:no-underline
                   text-blue-600 hover:text-blue-800 
                   visited:text-purple-600">
        Click me
      </a>
      <br />
      <a
        href="#"
        className="hover:underline text-blue-600
                   hover:text-green-800 
                   visited:text-green-700">
        Click me
      </a>
      <br />
 </div>

import './App.css';
function App() {
  return (
    <>
    <div className="absolute left-96 top-52">
      <a
        className="underline text-blue-600
                   hover:text-rose-900
                   visited:text-rose-700"
        href="#">
        Click me
      </a>
      <br />
      <a
        href="#"
        className="underline hover:no-underline
                   text-blue-600 hover:text-blue-800 
                   visited:text-purple-600">
        Click me
      </a>
      <br />
      <a
        href="#"
        className="hover:underline text-blue-600 
                   hover:text-green-800 
                   visited:text-green-700">
        Click me
      </a>
      <br />
    </div>
    </>
  );
}
  
export default App;

Salida: Ejecutar comando para iniciar la aplicación

npm run start