¿Cómo usar variables CSS con TailwindCSS?

Tailwind CSS  permite a los usuarios utilizar clases predefinidas en lugar de utilizar las propiedades CSS puras. 

Tenemos que instalar el Tailwind CSS . Cree el archivo CSS principal (Global.css) que se verá como el siguiente código.

Global.css: en el siguiente código, todo el cuerpo se envuelve en un solo selector. Todo el cuerpo se selecciona mediante class root o id root.

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

.root,
#root,
#docs-root {
  --primary-color: green;
  --secondary-color: blue;
}

tailwind.config.js: el siguiente código es el contenido del archivo de configuración de Tailwind con nuevas variables CSS. Simplemente queremos extender la configuración para agregar nuevos valores.

Javascript

module.exports = {
  theme: {
    extend: {
      colors: {
        header: "var(--header)",
        primary: "var(--primary)",
        secondary: "var(--secondary)",
        main: "var(--main)",
        background: "var(--background)",
        accent: "var(--accent)",
        footer: "var(--footer)"
      },
    },
  },
};

Código HTML: después de completar los pasos anteriores, podemos usar variables CSS en el siguiente código HTML. 

HTML

<!DOCTYPE html>
<head>
      
    <link href=
         "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
    <script src="tailwind.config.js">
    </script>
   <link href="Global.css" rel="stylesheet">
</head>
  
<body class="text-center">
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS flex Class</b>
    <div class="flex bg-green-200 p-4 mx-16 ">
        <div class="flex-1 bg-green-500 rounded-lg">1</div>
        <div class="flex-1 bg-green-500 rounded-lg">2</div>
        <div class="flex-1 bg-green-500 rounded-lg">3</div>
    </div>
</center>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *