Blog Tinux Net

Estructura recomendada para inicia proyecto Tailwindcss y Backend

Esctructura recomendable para proyecto

Backend, Frontend con tailwindcss

Para crear un proyecto web con Tailwind CSS, un backend de Node.js y un directorio de assets, se recomienda la siguiente estructura de archivos y directorios, junto con la secuencia para generarlo:

Estructura de archivos y directorios recomendada

mi-proyecto/
├── src/
│ ├── assets/ # Recursos
│ │ ├─────── images/
│ │ ├─────── fonts/
│ │ └─────── other/
│ ├── styles/
│ │ └───────── tailwind.css
│ ├── views/
│ │ └───────── index.html
│ └── js/
│ └───────── main.js
├── public/
│ ├─────── css/
│ │ └───────── styles.css
│ └─────── js/
│ └───────── bundle.js
├── server/
│ ├─────── routes/
│ ├─────── controllers/
│ ├─────── models/
│ └────────────── server.js
├── package.json
├── tailwind.config.js
├── postcss.config.js
└── .gitignore

Secuencia para generar el proyecto

  1. Crea el directorio del proyecto e inicializa npm:

    mkdir mi-proyecto cd mi-proyecto npm init -y

  2. Instala las dependencias necesarias:

    npm install express tailwindcss postcss autoprefixer npm install -D nodemon

  3. Crea la estructura de directorios:

    mkdir -p src/{assets/{images,fonts,other},styles,views,js} public/{css,js}server/{routes,controllers,models}

  4. Inicializa Tailwind CSS:

    npx tailwindcss init -p

  5. Configura Tailwind CSS. Editar el archivo tailwind.config.js:

[ tailwind.config.js ]

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

  1. Crea el archivo base de estilos Tailwind. [ src/styles/tailwind.css ], añadir:

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

  2. Configura los scripts en package.json:

[ package.json ]

"scripts": {
  "start": "node server/server.js",
  "dev": "nodemon server/server.js",
  "build:css": "tailwindcss -i ./src/styles/tailwind.css -o ./public/css/styles.css --watch"
}
  1. Crea un archivo HTML básico en src/views/index.html:

[ src/views/index.html ]

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Proyecto</title>
    <link href="/css/styles.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-3xl font-bold text-center mt-10">¡Hola, Tailwind CSS!</h1>
</body>
</html>

  1. Crea un servidor básico con Express en server/server.js:

    [ server/server.js ]

    const express = require('express'); const path = require('path');

    const app = express(); const PORT = process.env.PORT || 3000;

    app.use(express.static(path.join(__dirname, '../public')));

    app.get('/', (req, res) => { res.sendFile(path.join(__dirname, '../src/views/index.html')); });

    app.listen(PORT, () => { console.log(Servidor corriendo en http://localhost:${PORT}); });

  2. Crea un archivo .gitignore: [ .gitignore ]

    node_modules/ public/css/styles.css

  3. Inicia el servidor de desarrollo y compila Tailwind CSS:

    npm run build:css

En otra terminal:

npm run dev

Para crear un proyecto web con Tailwind CSS, un backend de Node.js y un directorio de assets, te recomiendo la siguiente estructura de archivos y directorios, junto con la secuencia para generarlo todo:

Estructura de archivos y directorios recomendada

mi-proyecto/
├── src/
│   ├── assets/
│   │   ├── images/
│   │   ├── fonts/
│   │   └── other/
│   ├── styles/
│   │   └── tailwind.css
│   ├── views/
│   │   └── index.html
│   └── js/
│       └── main.js
├── public/
│   ├── css/
│   │   └── styles.css
│   └── js/
│       └── bundle.js
├── server/
│   ├── routes/
│   ├── controllers/
│   ├── models/
│   └── server.js
├── package.json
├── tailwind.config.js
├── postcss.config.js
└── .gitignore

Secuencia para generar el proyecto

  1. Crea el directorio del proyecto e inicializa npm:
mkdir mi-proyecto
cd mi-proyecto
npm init -y
  1. Instala las dependencias necesarias:
npm install express tailwindcss postcss autoprefixer
npm install -D nodemon
  1. Crea la estructura de directorios:
mkdir -p src/{assets/{images,fonts,other},styles,views,js} public/{css,js} server/{routes,controllers,models}
  1. Inicializa Tailwind CSS:
npx tailwindcss init -p
  1. Configura Tailwind CSS. Edita el archivo tailwind.config.js:
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
  1. Crea el archivo base de estilos Tailwind. En src/styles/tailwind.css, añade:
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Configura los scripts en package.json:
"scripts": {
  "start": "node server/server.js",
  "dev": "nodemon server/server.js",
  "build:css": "tailwindcss -i ./src/styles/tailwind.css -o ./public/css/styles.css --watch"
}
  1. Crea un archivo HTML básico en src/views/index.html:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Proyecto</title>
    <link href="/css/styles.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-3xl font-bold text-center mt-10">¡Hola, Tailwind CSS!</h1>
</body>
</html>
  1. Crea un servidor básico con Express en server/server.js:
const express = require('express');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, '../public')));

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, '../src/views/index.html'));
});

app.listen(PORT, () => {
    console.log(`Servidor corriendo en http://localhost:${PORT}`);
});
  1. Crea un archivo .gitignore:
node_modules/
public/css/styles.css
  1. Inicia el servidor de desarrollo y compila Tailwind CSS:
npm run build:css

En otra terminal:

npm run dev

Con esta estructura y secuencia, tendrás un proyecto web básico configurado con Tailwind CSS, un backend de Node.js usando Express, y un directorio de assets organizado[1][2][3]. El servidor servirá el archivo HTML desde src/views, y los estilos compilados de Tailwind CSS se encontrarán en public/css/styles.css[4].

Esta configuración te permite separar claramente el código fuente (src), los archivos públicos (public), y la lógica del servidor (server), facilitando el mantenimiento y la escalabilidad del proyecto. Además, el script build:css compilará automáticamente tus estilos de Tailwind cada vez que hagas cambios, asegurando que siempre tengas la última versión de tus estilos disponible.

Citations: [1] https://certidevs.com/tutorial-tailwindcss-instalacion [2] https://cosasdedevs.com/posts/configurar-un-proyecto-tailwindcss/ [3] https://martagonzalez.dev/blog/como-instalar-y-configurar-tailwindcss-paso-a-paso/ [4] https://community.listopro.com/guia-completa-de-tailwind-css-desarrollo-rapido-y-estilizado-parte-i/ [5] https://kinsta.com/es/blog/tailwind-css/