Crear framework de CSS Tailwindcss
Tailwindcss
### Instalación completa.
Introduccion: TailWindCss es un framework compilado. Es decir, agrupacion de un conjunto de reglas y metodos (frameworks) para facilitarnos el frontend. Se podira decir que esta mas cerca del bajo nivel. Por otro lado, tiene la ventaja de dejar mas libertad que bootstrap y otros frameworks.
Esta la instalación CDN, que es muy rápida, solo un enlace a la CDN del CSS el tailwindcss y con eso es suficiente. Pero no ofrece todo el potencial ni modificaciones.
Es necesario instalar nodejs , para ello verificamos si lo tenemos instalado.
$ > node --version
v20.5.1
Si lotenemos, creamos la carpeta donde vams a crear el proyecto
- mkdir tailwind_proyect
- cd tailwind_proyect
Creamos la infraestructura de node.
npm init
npm: Node Package Manager
Te preguntara como se llamara el proyecto, version, etc. es opcional. Pero si somos pulcros, deberiamos de rellenarlo. Mas adelante, veremos que todos estos detalles nos hara mejor programadores.
Se nos creara un fichero JSON: package.json
{
2. Creacion de estructura tailwind:
"name": "tailwind_proyect",
"version": "1.0.0",
"description": "Practicas de tailwindcss",
"main": "index.html",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [
"tailwind"
],
"author": "Tino Echaniz",
"license": "MIT"
}
npm install tailwindcss --save
Que nos descargar los ficheros necesarios de css para trabajar con tailwind.
Nos creara un fichero packages-lock.json, que contendra todos los paquetes del directorio creado de tailwind:
node_modules
Añadir Tailwin a nuestro CSS
Tenemos que crear nuestra carpèta de CSS y en ella crear un archivo css de configuracion de tailwind:
ejemplo: tailwind.css
ESte archivo, no es el que trabajaremos directamente, sino en que se creara para generar el definitivo de css del proyecto. que sera un compilado que contendrá lo que únicamente utilizaremos para generar la web.
tailwind.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
npx tailwindcss init
... Created Tailwind CSS config file: tailwind.config.js
Y se nos habra creado este fichero: tailwind.config.js con el siguiente contenido
tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
Una recomendacion es ponerle unos plugis de Thems Berg
Pero previamente hay que descargarlo de npm.
Para ello lo buscamos exaactamente con
npm search autoprefixer
Y luego lo instalamos
npm install autoprefixer
plugins: [ // ... require('tailwindcss'), require('autoprefixer'), // ... ]
Y nos quedaria el fichero de sta manera:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
}
Ejecutamos el comando de compilación de nuestro archivo styles.css
npx tailwindcss build -i css/tailwind.css -o css/styles.css
Y nos saldra este mensaje: Rebuilding...
warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
Porque todavia no hemos creado ningun fichero y no sabe en donde buscar para poder crear la compilacion. Y ademas tenemos que indicarle que tipo de fichero es: html, php, js...etc
Editamos el tailwind.config.js y en la sección e content agregamos lo siguiente.:
content: ["./**/*.{html,php,js}"],
Recursos y enlaces:
1.- Tailwind CSS Full Course for Beginners | Complete All-in-One Tutorial | 3 Hours
2. Tailwind CSS tutorial - Learn how to build websites using a utility-first CSS framework