{"id":365,"date":"2023-03-06T22:03:45","date_gmt":"2023-03-06T22:03:45","guid":{"rendered":"https:\/\/raymundopizano.com\/blog\/?p=365"},"modified":"2025-03-05T23:42:52","modified_gmt":"2025-03-05T23:42:52","slug":"instalar-tailwind-css-modo-postcss","status":"publish","type":"post","link":"https:\/\/raymundopizano.com\/blog\/nodejs\/instalar-tailwind-css-modo-postcss\/","title":{"rendered":"Instalar Tailwind CSS modo PostCSS"},"content":{"rendered":"\n

Para ello requerimos instalar npm<\/strong> el administrador de paquetes por defecto de Node.js<\/strong>.<\/p>\n\n\n\n

Descargamos el instalador https:\/\/nodejs.org\/es\/<\/a> sugiero la versi\u00f3n estable LTS<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Lo Instalamos<\/h1>\n\n\n\n

En Windows<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

En MacOS<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

En Ubuntu Linux., mi distro para Desktop preferida. <\/h2>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
curl<\/span> <\/span>-fsSL<\/span> <\/span>https:\/\/deb.nodesource.com\/setup_18.x<\/span> <\/span>|<\/span> <\/span>sudo<\/span> <\/span>-E<\/span> <\/span>bash<\/span> <\/span>-<\/span> &&<\/span>\\<br>sudo<\/span> <\/span>apt-get<\/span> <\/span>install<\/span> <\/span>-y<\/span> <\/span>nodejs<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Para otras distros de Linux https:\/\/github.com\/nodesource\/distributions\/blob\/master\/README.md<\/a><\/p>\n\n\n\n
Instalaci\u00f3n Tailwind <\/h1>\n\n\n\n
Ejecutamos la terminal nativa de cada sistema, recuerda que para windows puede ser CMD o PowerShell., entramos al directorio Desktop y creamos una carpeta tailwindcss e inicializamos el proyecto.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
cd Desktop<\/span><\/span>\nmkdir tailwindcss<\/span><\/span>\nnpm init<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Presionamos Enter\u23ce <\/kbd>a todas las opciones para dejarlas por defecto y al final yes<\/kbd> y Enter\u23ce<\/kbd><\/p>\n\n\n\n
En Windows<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
En MacOS \/ Linux<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Instalar Tailwind como un plugin de PostCSS<\/h2>\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>postcss<\/span> <\/span>autoprefixer<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Crearmos el archivo de plantillas<\/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\n
\"\"<\/figure>\n\n\n\n
Editamos tailwind.config.js y agregamos el codigo \".\/public\/index.html\", \".\/src\/*\/<\/em>.{html,js}\"<\/code> a content<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
\/** <\/span>@type<\/span> <\/span>{import('tailwindcss').Config}<\/span> *\/<\/span><\/span>\nmodule<\/span>.<\/span>exports<\/span> <\/span>=<\/span> {<\/span><\/span>\n  content: [<\/span>".\/public\/index.html"<\/span>, <\/span>".\/src\/**\/*.{html,js}"<\/span>],<\/span><\/span>\n  theme: {<\/span><\/span>\n    extend: {},<\/span><\/span>\n  },<\/span><\/span>\n  plugins: [],<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Creamos el directorio src y dentro css y dentro el archivo tailwind.css src\/css\/tailwind.css<\/code>., agregamos las siguientes lineas a tailwind.css<\/code><\/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\n
\"\"<\/figure>\n\n\n\n
Creamos nuestro build de la carpeta source .\/src\/css\/tailwind.css a una publica .\/public\/css\/tailwind.css<\/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>.\/public\/css\/tailwind.css<\/span> <\/span>--watch<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Probamos que funcione creando el index.html dentro de la carpeta .\/public\/<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<!<\/span>DOCTYPE<\/span> <\/span>html<\/span>><\/span><\/span>\n<<\/span>html<\/span> <\/span>lang<\/span>=<\/span>"en"<\/span>><\/span><\/span>\n<<\/span>head<\/span>><\/span><\/span>\n    <<\/span>meta<\/span> <\/span>charset<\/span>=<\/span>"UTF-8"<\/span>><\/span><\/span>\n    <<\/span>meta<\/span> <\/span>name<\/span>=<\/span>"viewport"<\/span> <\/span>content<\/span>=<\/span>"width=device-width, initial-scale=1.0"<\/span>><\/span><\/span>\n    <<\/span>title<\/span>>Document<\/<\/span>title<\/span>><\/span><\/span>\n    <<\/span>link<\/span> <\/span>rel<\/span>=<\/span>"stylesheet"<\/span> <\/span>href<\/span>=<\/span>".\/css\/tailwind.css"<\/span>><\/<\/span>link<\/span>><\/span><\/span>\n<\/<\/span>head<\/span>><\/span><\/span>\n<<\/span>body<\/span>><\/span><\/span>\n    <<\/span>h1<\/span>>Hi, Ray<\/<\/span>h1<\/span>><\/span><\/span>\n    <<\/span>div<\/span> <\/span>class<\/span>=<\/span>"w-72 h-72 bg-blue-300"<\/span>><\/<\/span>div<\/span>><\/span><\/span>\n<\/<\/span>body<\/span>><\/span><\/span>\n<\/<\/span>html<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Automatizar el Build<\/h3>\n\n\n\n
Agregamos la linea \"tw:build\": \"tailwind -i .\/src\/css\/tailwind.css -o .\/public\/css\/tailwind.css\"<\/code> al archivo package.json<\/kbd><\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
{<\/span><\/span>\n    <\/span>"name"<\/span>: <\/span>"tailwindcss"<\/span>,<\/span><\/span>\n    <\/span>"version"<\/span>: <\/span>"1.0.0"<\/span>,<\/span><\/span>\n    <\/span>"description"<\/span>: <\/span>""<\/span>,<\/span><\/span>\n    <\/span>"main"<\/span>: <\/span>"index.js"<\/span>,<\/span><\/span>\n    <\/span>"scripts"<\/span>: {<\/span><\/span>\n        <\/span>"test"<\/span>: <\/span>"echo <\/span>\\"<\/span>Error: no test specified<\/span>\\"<\/span> && exit 1"<\/span>,<\/span><\/span>\n        <\/span>"tw:build"<\/span>: <\/span>"tailwind -i .\/src\/css\/tailwind.css -o .\/public\/css\/tailwind.css"<\/span><\/span>\n    },<\/span><\/span>\n    <\/span>"author"<\/span>: <\/span>""<\/span>,<\/span><\/span>\n    <\/span>"license"<\/span>: <\/span>"ISC"<\/span>,<\/span><\/span>\n    <\/span>"devDependencies"<\/span>: {<\/span><\/span>\n        <\/span>"autoprefixer"<\/span>: <\/span>"^10.4.13"<\/span>,<\/span><\/span>\n        <\/span>"postcss"<\/span>: <\/span>"^8.4.21"<\/span>,<\/span><\/span>\n        <\/span>"tailwindcss"<\/span>: <\/span>"^3.2.7"<\/span><\/span>\n    }<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Asi solo tenemos que poner<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
npm run tw:build<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
Para ello requerimos instalar npm el administrador de paquetes por defecto de Node.js. Descargamos el instalador https:\/\/nodejs.org\/es\/ sugiero la versi\u00f3n estable LTS Lo Instalamos En Windows En MacOS En Ubuntu Linux., mi distro para Desktop preferida. Para otras distros de Linux https:\/\/github.com\/nodesource\/distributions\/blob\/master\/README.md Instalaci\u00f3n Tailwind Ejecutamos la terminal nativa de cada sistema, recuerda que para windows […]<\/p>\n","protected":false},"author":1,"featured_media":430,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,8],"tags":[],"class_list":["post-365","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nodejs","category-tailwind-css"],"_links":{"self":[{"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/posts\/365","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=365"}],"version-history":[{"count":44,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/posts\/365\/revisions"}],"predecessor-version":[{"id":2053,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/posts\/365\/revisions\/2053"}],"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=365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/categories?post=365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/tags?post=365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}