Sin duda alguna TailwindCSS ha crecido en popularidad y uso .
Se autodefine como "utility-first CSS framework" un framework CSS de primera utilidad el cual su principal objetivo es el proporcionar las herramientas para construir una plantilla y un diseño ,proporciona solo componentes necesarios para diseñar sus páginas web, como márgenes, tamaños, colores y todo lo que conocemos de CSS, lo bueno de esto es que es combinable asi que podremos usar esas bases para crear culaquier componente que querramos.
Comenzemos
1. Creando un custom webpack con post-css.
1 : Creamos un nuevo proyecto en angular usando el comando:
Terminal: ng new angular-tailwind
ng new nombredetuproyecto
Podemos usar css o scss ( para este artículo usaremos scss).
2 : Navegamos dentro de nuestro proyecto :
cd nombredetuproyecto
3: Instalamos las dependencias
npm install -s postcss-scss postcss-import@12.0.1 postcss-loader@~3.0.0 @angular-builders/custom-webpack tailwindcss
Por favor usar la versión 12.0.1 o una cualquiera menor a la 13.0.0 ya que dicha versión tiene ciertos errores de incompatibilidad al menos al día de hoy 22 de Agosto de 2020.
4: Configuramos tailwind
npx tailwind init --full
la etiqueta -full indica de que al crearse el archivo tailwind.config.js este incluirá toda la configuración por defecto la cual puedes ver aquí .
si deseas prescindir de la configuración por defecto puedes guiarte aquí.
- Agregamos los siguientes imports a nuestro styles.scss
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
- Creamos el archivo webpack.config.js
Podemos simplemente crear el archivo en nuestro editor de texto favorito o hacerlo vía terminal usando los comandos
touch webpack.config.js // Para Linux y MacOS
en Windows con
copy NUL webpack.config.js o copy /b NUL webpack.config.js
Dentro de webpack.config.js pegamos lo siguiente :
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: "postcss-loader",
options: {
ident: "postcss",
syntax: "postcss-scss",
plugins: () => [
require("postcss-import"),
require("tailwindcss"),
require("autoprefixer"),
],
},
},
],
},
};
7: Modificamos el angular.json para utilizar el custom webpack con postcss
{
...
"projects": {
"nombredetuproyecto":{
...
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser", // aca le decimos que use el custom webpack para servir el app
"options": {
"customWebpackConfig": { // aca le decimos donde esta el archivo de configuración
"path": "./webpack.config.js"
},
...
},
...
},
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server", // aca le decimos que use el custom webpack para servir el app
"options": {
"customWebpackConfig": { // aca le decimos donde esta el archivo de configuración
"path": "./webpack.config.js"
},
...
},
...
},
...
}
}
}
},
}
7: Probamos Tailwind
Usamos el codigo de el Hero Section
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
-->
<div class="relative bg-white overflow-hidden">
<div class="max-w-screen-xl mx-auto">
<div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
<svg class="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-white transform translate-x-1/2" fill="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="50,0 100,0 50,100 0,100" />
</svg>
<div class="relative pt-6 px-4 sm:px-6 lg:px-8">
<nav class="relative flex items-center justify-between sm:h-10 lg:justify-start">
<div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
<div class="flex items-center justify-between w-full md:w-auto">
<a href="#" aria-label="Home">
<img class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/workflow-mark-on-white.svg" alt="Logo">
</a>
<div class="-mr-2 flex items-center md:hidden">
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" id="main-menu" aria-label="Main menu" aria-haspopup="true">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
<div class="hidden md:block md:ml-10 md:pr-4">
<a href="#" class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Product</a>
<a href="#" class="ml-8 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Features</a>
<a href="#" class="ml-8 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Marketplace</a>
<a href="#" class="ml-8 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">Company</a>
<a href="#" class="ml-8 font-medium text-indigo-600 hover:text-indigo-900 transition duration-150 ease-in-out">Log in</a>
</div>
</nav>
</div>
<!--
Mobile menu, show/hide based on menu open state.
Entering: "duration-150 ease-out"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
-->
<div class="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
<div class="rounded-lg shadow-md">
<div class="rounded-lg bg-white shadow-xs overflow-hidden" role="menu" aria-orientation="vertical" aria-labelledby="main-menu">
<div class="px-5 pt-4 flex items-center justify-between">
<div>
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-on-white.svg" alt="">
</div>
<div class="-mr-2">
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" aria-label="Close menu">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div class="px-2 pt-2 pb-3">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Product</a>
<a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Features</a>
<a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Marketplace</a>
<a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Company</a>
</div>
<div>
<a href="#" class="block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100 hover:text-indigo-700 focus:outline-none focus:bg-gray-100 focus:text-indigo-700 transition duration-150 ease-in-out" role="menuitem">
Log in
</a>
</div>
</div>
</div>
</div>
<main class="mt-10 mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
<div class="sm:text-center lg:text-left">
<h2 class="text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl">
Data to enrich your
<br class="xl:hidden">
<span class="text-indigo-600">online business</span>
</h2>
<p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.
</p>
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
<div class="rounded-md shadow">
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
Get started
</a>
</div>
<div class="mt-3 sm:mt-0 sm:ml-3">
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:text-indigo-600 hover:bg-indigo-50 focus:outline-none focus:shadow-outline-indigo focus:border-indigo-300 transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
Live demo
</a>
</div>
</div>
</div>
</main>
</div>
</div>
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" alt="">
</div>
</div>
y este es el resultado :
así que ya estamos listos para usar Tailwind en nuestro proyecto Angular si deseas probar los componentes de forma online puedes visitar : Tailwind Playground
2. Usando ng-tailwindcss.
Bonus: puedes usar también o ver el repo de este artículo o el una plantilla gratuita.
Código de este articulo
Plantilla de tim
Top comments (0)