<\/path><\/svg><\/span>node<\/span> <\/span>-v<\/span><\/span>\nnpm<\/span> <\/span>init<\/span> <\/span>-y<\/span><\/span><\/code><\/pre><\/div>\n\n\n\nnode -v<\/code> verificara la versi\u00f3n de nodejs.npm init -y<\/code> creara un archivo package.json con la informaci\u00f3n del proyecto.<\/p>\n\n\n\nInstalamos Tailwind CSS<\/h2>\n\n\n\n Instalamos tailwindcss v\u00eda npm, en la terminal escribimos los comandos:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>npm<\/span> <\/span>install<\/span> <\/span>-D<\/span> <\/span>tailwindcss<\/span><\/span><\/code><\/pre><\/div>\n\n\n\nNos creara una carpeta node_modules<\/code> con los paquetes a utilizar en nuestro proyecto, y los archivos package-lock.json<\/code> y package.json<\/code>.<\/p>\n\n\n\nEscribimos el siguiente comando para que nos cree el archivo tailwind.config.js<\/code> que nos permitir\u00e1 configurarlo y personalizarlo. <\/p>\n\n\n\n<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>npx<\/span> <\/span>tailwindcss<\/span> <\/span>init<\/span><\/span><\/code><\/pre><\/div>\n\n\n\nConfigurando Tailwind CSS<\/h2>\n\n\n\n Abrimos el archivo tailwind.config.js con VS Code y modificamos la lineal 3 para que nos quede as\u00ed:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>content: [<\/span>".\/src\/**\/*.{html,js}"<\/span>],<\/span><\/span><\/code><\/pre><\/div>\n\n\n\nEsta directiva indica que buscara entre todos los archivos html y js en busca de clases al momento de compilar.<\/p>\n\n\n\n
Crear archivos y carpetas necesarios<\/h2>\n\n\n\n Con la ayuda de VS Code creamos una carpeta src<\/code> y dentro de ella el archivo index.html<\/code> (src\/index.html)., y dentro de src<\/code> la carpeta css <\/code>y dentro tailwind.css<\/code> (src\/css\/tailwind.css).<\/p>\n\n\n\nModificando tailwind.css<\/h2>\n\n\n\n Agregamos las siguientes directivas al archivo tailwind.css para integrar las clases y los estilos (base, componentes y utiler\u00edas).<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>@tailwind<\/span> base;<\/span><\/span>\n@tailwind<\/span> components;<\/span><\/span>\n@tailwind<\/span> utilities;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\nCompilando tailwind<\/h2>\n\n\n\n Ejecutamos el comando el cual escaneara y\/o buscara entre todos nuestros archivos html y js<\/code> las clases de tailwind y las integrara en nuestro archivo CSS de salida. Y –watch estar\u00e1 pendiente a cualquier cambio en estos archivos para integrar o eliminar las nuevas clases.<\/p>\n\n\n\n<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>npx<\/span> <\/span>tailwindcss<\/span> <\/span>-i<\/span> <\/span>.\/src\/css\/tailwind.css<\/span> <\/span>-o<\/span> <\/span>.\/src\/css\/estilos.css<\/span> <\/span>--watch<\/span><\/span><\/code><\/pre><\/div>\n\n\n\nPara detener este proceso presiona Ctrl + C<\/kbd> y S + Enter<\/kbd>.<\/p>\n\n\n\nCreando nuestro primer HTML con clases de Tailwind<\/h2>\n\n\n\n Modificamos el archivo index.html y agregamos la ruta de CSS compilado (.\/css\/estilos.css).<\/p>\n\n\n\nAgregamos una clase bg-red-500<\/code><\/p>\n\n\n\nAgregar plugin Tailwind CSS IntelliSense a VS Code <\/h2>\n\n\n\n Este plugin nos ayudara a autocomplementar las clases de Tailwind, colorear la sintaxis y muchas utilidades mas.<\/p>\n\n\n\nCrear script para facilitar compilaci\u00f3n<\/h2>\n\n\n\n Editamos package.json y agregamos al final de la linea 7 una coma , y la siguiente linea de c\u00f3digo:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>"twbuild"<\/span>: <\/span>"tailwindcss -i .\/src\/css\/tailwind.css -o .\/src\/css\/estilos.css --watch"<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<\/p>\n\n\n\nGuardamos el archivo y lo ejecutamos desde la terminal con<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>npm run twbuild<\/span><\/span><\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"Este m\u00e9todo de instalar Tailwind CSS funciona escaneando todos tus archivos HTML, componentes JavaScript y cualquier otra plantilla en busca de nombres de clases, generando los estilos correspondientes y luego escribi\u00e9ndolos en un archivo CSS est\u00e1tico.Es r\u00e1pido, flexible y confiable, sin tiempo de ejecuci\u00f3n. Instalando Node.js Descargamos e instalamos nodejs https:\/\/nodejs.org\/en\/download\/ de preferencia la versi\u00f3n […]<\/p>\n","protected":false},"author":1,"featured_media":430,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-685","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tailwind-css"],"_links":{"self":[{"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/posts\/685","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/comments?post=685"}],"version-history":[{"count":47,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/posts\/685\/revisions"}],"predecessor-version":[{"id":2095,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/posts\/685\/revisions\/2095"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/media\/430"}],"wp:attachment":[{"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/media?parent=685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/categories?post=685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/tags?post=685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/raymundopizano.com\/blog\/wp-content\/uploads\/2024\/02\/install_nodejs.gif\")
<\/figure>\n\n\n\n