Creación de Plantillas con Django y Tailwind CSS

Si ocupaste ayuda de como mostrar la lista de productos, recuerda que en el archivo view donde creamos el ProductListView al profe le falto enseñar la importación:

from products.models import Product

aunque es fácil de saber que hace falta una importación aquí se las dejo por si lo necesitan 👍

list\_product.html ```html

Lista de productos

{% for product in products %}
• {{product.name}}

  {{product.price}}

  {% if product.photo %}
  {% endif %}
{% endfor %}

```\

Lista de productos\

\

{% for product in products %} \
• {{product.name}} \

  {{product.price}}\

  {% if product.photo %} \
  {% endif %} \
{% endfor %}\


Para añadir al directorio de templates también se puede usar de la siguiente forma, sin necesidad de hacer uso del os.path.join, como también lo explica el comentario que se mostró en el video `        'DIRS': [            ` `BASE_DIR / 'templates'        ` ` ],`

 Por lo momentos este ha sido el progreso, muy emocionado por el curso

La forma fácil de comentar en html: **\** ```html ```

En esta clase el profe indica que en este punto no hemos aplicado lo que aprendimos de los templates de Django, especialmente que "*... podemos extender desde un archivo* `base.html` *para tener el resto de estructura de html*". ¿Alguien me podría dirigir a en qué parte del curso se hace referencia a este archivo? Yo tengo clara la clase donde habla de los templates, pero no recuerdo que haya hablado sobre el `base.html.`

Hablando de TailwindCss, también les recomiendo buscar componentes desde **Flowbite**: * <https://flowbite.com> Y aqui pueden ver card que puede usar: * <https://flowbite.com/docs/components/card/> 

list\_product.html ```html

Lista de productos

{% for product in products %}
• {{product.name}}

  {{product.price}}

  {% if product.photo %}
  {% endif %}
{% endfor %}

```

 Ahí vamos :)


Hola, porfa ¿el curso tiene algún repo?, necesito revisar el código por que algo no me anda.

Les comparto mi plantilla no tengo conocimientos robustos en html menos en css pero use chat gpt y teermine con esta plantilla bastante amigable al ojo {% extends 'base.html' %} \<center>{% block title %}Coffee Products{% endblock %}\</center> {% block content %}\<center>\

Productos y Precios\

\</center> \\{% endblock %} ```html {% extends 'base.html' %} <center>{% block title %}Coffee Products{% endblock %}</center> {% block content %} <center>

Productos y Precios

</center> {% endblock %} ```

Hasta este punto mi código corre el ./manage.py runserver, pero tengo arrastrando un detalle con mi archivo forms.py linea 12 dentro del def save() el Product.objects.create marca el error "Class 'Product' has no 'objects' member" y da error 500 al tratar de guardar a base los datos en el navegador, anexo pantalla si alguien pudiera ayudarme 

Así va quedando mi Coffee Shop 

Si nadie se preguntó cómo colocar si está disponible o no un producto, lo hacen con esto: ```python {{ product.avaliable|yesno:"Sí,No" }} ```

Si DIRS iba a ser una sola linea porque no crearla toda de una vez!!

Profe que exprensiones de VS code tiene para este proyecto? hazta ahora solo llevo las de python, pylance, python debugger, black formater y django. tambien tengo seleccionado el django html debajo en vscode, pero no me hace autocompletado de la sintaxis de html como a usted. solo a la de django.

    

Wow esta clase fue genial! mi lista de productos va así... 

Me gusta mas con este color 

Para integrar \*\*Tailwind CSS\*\* en un proyecto \*\*Django\*\*, necesitas configurar Tailwind junto con Django para generar los archivos CSS y usarlos en tus plantillas. A continuación, te guiaré paso a paso para hacerlo. \### Pasos para Integrar TailwindCSS en Django: \### 1. \*\*Configurar Tailwind CSS con Node.js\*\* Primero, debes tener \*\*Node.js\*\* instalado en tu máquina, ya que Tailwind CSS depende de él. Si no lo tienes instalado, puedes descargarlo desde \[nodejs.org]\(https://nodejs.org/). \#### 1.1. \*\*Inicializar Node.js en tu proyecto\*\* Abre una terminal en la carpeta raíz de tu proyecto Django y ejecuta: ```bash npm init -y ``` Esto creará un archivo `package.json` en tu proyecto. \#### 1.2. \*\*Instalar Tailwind CSS\*\* Instala Tailwind CSS junto con sus dependencias necesarias: ```bash npm install tailwindcss postcss autoprefixer --save-dev ``` \#### 1.3. \*\*Inicializar Tailwind CSS\*\* Después de la instalación, inicializa el archivo de configuración de Tailwind: ```bash npx tailwindcss init ``` Esto generará un archivo `tailwind.config.js` en la raíz de tu proyecto. \### 2. \*\*Configurar los Archivos Tailwind\*\* \#### 2.1. \*\*Crear archivos de entrada y salida para Tailwind\*\* Crea una carpeta llamada `assets` en tu proyecto para almacenar tus archivos CSS personalizados. Dentro de esta carpeta, crea un archivo `input.css` que será el archivo de entrada para Tailwind. ```bash mkdir assets touch assets/input.css ``` En el archivo `assets/input.css`, añade las directivas de Tailwind CSS: ```css @tailwind base; @tailwind components; @tailwind utilities; ``` \#### 2.2. \*\*Configurar el archivo `tailwind.config.js`\*\* En el archivo `tailwind.config.js`, debes configurar las rutas donde Tailwind buscará tus plantillas HTML o Django para purgar las clases no utilizadas. Modifica el archivo para que tenga esta configuración: ```js module.exports = { content: \[ './templates/\*\*/\*.html', './\*\*/templates/\*\*/\*.html', ], theme: { extend: {}, }, plugins: \[], } ``` Esto le indica a Tailwind que debe buscar las clases CSS utilizadas en los archivos HTML dentro de las carpetas `templates` del proyecto. \### 3. \*\*Configurar PostCSS\*\* PostCSS es necesario para que Tailwind compile el CSS final. Crea un archivo de configuración llamado `postcss.config.js` en la raíz de tu proyecto: ```bash touch postcss.config.js ``` Y añade lo siguiente en ese archivo: ```js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } ``` \### 4. \*\*Compilar Tailwind CSS\*\* Ahora, necesitas compilar el archivo `input.css` de Tailwind en un archivo CSS de salida que usarás en tu proyecto Django. Agrega un script en el archivo `package.json` para facilitar la compilación: ```json "scripts": { "build-css": "npx tailwindcss -i ./assets/input.css -o ./static/css/output.css --watch" } ``` Este comando compilará el archivo `input.css` y generará el archivo `output.css` en la carpeta `static/css`. Luego, ejecuta este comando en la terminal para compilar Tailwind CSS y ver cambios automáticamente: ```bash npm run build-css ``` \### 5. \*\*Incluir el CSS Compilado en Django\*\* Ahora que tienes el archivo `output.css` generado por Tailwind, lo incluirás en tus plantillas de Django. \#### 5.1. \*\*Configurar el uso de archivos estáticos en Django\*\* Asegúrate de tener la configuración de archivos estáticos en tu archivo `settings.py`. Debes tener algo similar a lo siguiente: ```python STATIC\_URL = '/static/' STATICFILES\_DIRS = \[BASE\_DIR / "static"] ``` \#### 5.2. \*\*Incluir el archivo CSS en las plantillas\*\* En las plantillas HTML de Django, usa la etiqueta `{% static %}` para cargar el archivo CSS compilado. Ejemplo en `templates/base.html`: ```html {% load static %} \ \<html lang="en"> \<head> \<meta charset="UTF-8"> \<meta name="viewport" content="width=device-width, initial-scale=1.0"> \<title>My Django Project\</title> \<link href="{% static 'css/output.css' %}" rel="stylesheet"> \</head> \<body> \<h1 class="text-4xl font-bold text-blue-500">Hola, Tailwind con Django!\ {% block content %} {% endblock %} \</body> \</html> ``` \### 6. \*\*Probar Tailwind CSS en tu Proyecto\*\* Si seguiste todos los pasos correctamente, Tailwind CSS debería estar funcionando en tu proyecto Django. Ejecuta el servidor de Django: ```bash python manage.py runserver ``` Y visita tu aplicación. Ahora podrás usar clases de Tailwind en tus plantillas y personalizar tus estilos con su sistema de utilidades. \### 7. \*\*(Opcional) Optimización para Producción\*\* Cuando estés listo para producción, puedes optimizar el archivo CSS eliminando todas las clases no utilizadas con el siguiente comando: ```bash NODE\_ENV=production npm run build-css ``` Esto reducirá significativamente el tamaño del archivo CSS. \--- Con estos pasos, habrás integrado \*\*Tailwind CSS\*\* en tu proyecto Django, lo que te permitirá aprovechar su potente sistema de diseño basado en clases de utilidad. ¡Ahora puedes comenzar a utilizar Tailwind para crear interfaces modernas y responsivas!

```html {% extends 'base.html' %} <center>{% block title %}Coffee Products{% endblock %}</center> {% block content %} <center>

Productos y Precios

</center> {% endblock %} ```Les dejo mi html list\_product.html de un comentario anterior

pip install psycopg2-binary ```js DATABASES = { 'default': { 'ENGINE': 'django.db.backends.postgresql', 'NAME': 'coffee_shop', # El nombre de la base de datos que creaste 'USER': 'postgres', # El nombre de usuario que creaste 'PASSWORD': 'alex2539', # La contraseña del usuario 'HOST': 'localhost', # O la dirección IP del servidor de la base de datos 'PORT': '5432', # El puerto de PostgreSQL (por defecto es 5432) } } ```DATABASES = {    'default': {        'ENGINE': 'django.db.backends.postgresql',        'NAME': 'coffee\_shop',        # El nombre de la base de datos que creaste        'USER': 'postgres',            # El nombre de usuario que creaste        'PASSWORD': 'alex2539',    # La contraseña del usuario        'HOST': 'localhost',         # O la dirección IP del servidor de la base de datos        'PORT': '5432',              # El puerto de PostgreSQL (por defecto es 5432)    }}

Y cuando postgre?, sqlite no me funciona

Hola Luis, me gustaria usar mi propia plantilla, css, js, como puedo hacer eso? Por favor ayuda! gracias

![]()Tailwindcss es un muy buen framework de CSS