Sigo prefiriendo TailwindCSS 😅
Conceptos básicos de Next.js 14
Optimización de Carga Web con Next.js
Creación de un Proyecto Next.js con TypeScript: Paso a Paso
Tienda Online con Shopify y Next.js: Implementación Práctica
Rutas Estáticas y Dinámicas en Next.js: Cómo Implementarlas
Layouts y Navegación en Next.js: Implementación Práctica
Navegación Eficiente con el Componente Link en Next.js
Rutas Dinámicas y Opcionales en Next.js
Componentes Cliente y Servidor en Next.js: Cuándo Usar Cada Uno
Componentes Reutilizables en Next.js para Mejorar la Arquitectura Web
Quiz: Conceptos básicos de Next.js 14
Manejo de estilos y estáticos en Next.js 14
CSS Modules en Next.js: Estiliza Componentes sin Colisiones
Configurar Sass en Next.js para Estilos Modulares Avanzados
Estilos Globales con SASS: Estrategias y Buenas Prácticas
Agregar Archivos Estáticos en Next.js
Optimización de imágenes en Next.js con Next.image
Optimización de Imágenes con NextImage: Técnicas y Buenas Prácticas
Optimización de Fuentes de Google en Aplicaciones Web
Estilos Dinámicos en React con Classnames: Uso Práctico y Eficiente
Quiz: Manejo de estilos y estáticos en Next.js 14
Data Fetching en Next.js
Creación de Tienda en Shopify usando Next.js
Variables de Entorno en Next.js: Configuración y Uso Avanzado
Consumo de APIs con JavaScript: guía práctica paso a paso
Loading de Productos con Next.js y React Server Components
Implementación de Root Grouping en Next.js: Tips y Mejores Prácticas
Manejo de errores con React y Next.js: Implementación práctica
Quiz: Data Fetching en Next.js
Next.js Avanzado
Gestión Global de Errores en Next.js
Renderizado con React Server Components en Next.js 14
Diferencias entre Template y Layout en Next.js
Arquitectura Escalable en Aplicaciones de Software
Creación de APIs con Road Handlers en Next.js
Configuración de Colecciones en Shopify para Tiendas Virtuales
Patrones de Data Fetching en Next.js: Secuencial y Paralelo
Filtrado de productos en Shopify usando JavaScript APIs
Rutas Dinámicas y Búsquedas en React con Hooks
Implementación de Componentes Presentacionales en React
Optimización de Caché en Next.js: Tipos y Estrategias
Revalidación de Caché en Next.js: Uso de Tags y Paths
Redirecciones en Next.js: Uso en Server y Client Components
Sanitización de HTML en React para prevenir vulnerabilidades XSS
SEO en páginas estáticas y dinámicas con Next.js
Quiz: Next.js Avanzado
Autenticación y autorización
API Storefront y Gestión de Tokens en Shopify
Uso de Server Actions en Next.js para Formularios
Implementación de Mutaciones GraphQL en Shopify
Creación de Cookies Seguras en Next.js para Autenticación
Implementación Completa de Flujo de Login en Node.js
Validación de Tokens de Acceso en Next.js con GraphQL
Carrito de Compras: Implementación con React y Estilos Sass
Estado global en Next.js 13 con Sustant
Carrito de Compras con React: Implementación y Estilos
Errores de hidratación en React y solución con Next.js Dynamic
Implementación de Middlewares en Next.js: Protege Rutas de Acceso
Inteligencia Artificial
Implementación de Chatbots con Next.js y Vercel AI SDK
Personalización de Chatbots con OpenAI para E-commerce
Performance
Rutas Paralelas en Next.js: Mejora el Rendimiento de Tus Apps
Análisis de bundles con Webpack Bundle Analyzer
Quiz: Performance
Frontend Ops
Optimización de Next.js con Edge Runtime
Despliegue de Aplicaciones NxJS en Vercel: Guía Práctica
Arquitectura de Proyectos Empresariales con Next.js
Quiz: Frontend Ops
Next.js es parte de tu nuevo stack
Creación de Apps con Next.js y React: Frontend y Backend
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Estilos Globales con SASS: Estrategias y Buenas Prácticas
12/57Recursos
Aportes 11
Preguntas 3
Ordenar por:
En lo personal para proyectos chicos/medianos prefiero tailwind, pero en proyectos grandes creo que es mejor css tradicional o sass ya que tailwind puede tener cambios importantes en cada versión y puede dificultar el mantenimiento del proyecto
yo decido ser feliz, me quedo con Tailwind
En el tailwind.config.ts podemos guardar nuestras variables.
para el gradiente lo puse en el archivo globals.css con @layers components y la directiva @apply
y para darle estilos al body lo hice de la siguiente manera:
Como puedo acceder al código en la branch sass-globals-start, pues también me manda error siguiendo el tutorial
Que voleo de carpetas 😮💨
Hay algo que no funcionó como el lo hizo así que tuve que hacerlo de manera diferente
En globals.scss no usé import sino use "./variables" as vars;
@use "./variables" as vars; // Assign "variables" file a namespace
body { margin: 0; padding: 0; background: vars.$color-primary; // Reference with the namespace color: vars.$text-color;}
Lo otro es que en layout no es que simplemente no es recomendado importar el globals con styles from, sino que si lo haces así no funciona o al menos a mi no me funcionó.
Me tope con unos pequeños problemas al tratar de importar el archivo `_variables.sass`
1\. Cambie el `@import` por `@use`, porque me sacaba un warning dado que estaba *deprecated.*
2\. Al hacer dicho cambio, se crea un namespace, entonces se debe usar para este ejemplo algo como:
```css
@use "variables.sass"
.your-class
color: variables.$colorPrimary
```Espero le sirva a alguien.
El profesor explica bien, pero deben entender que es un curso y se adelante mucho, el detalle es dar el paso a paso para que nos quedemos resolviendo errores que no sabemos porque salen y al final los error son por formato y punto y coma ya que en react se se pone
que extension usa el profe para que muestre asi los colores de sass ?
Me quedo con Tailwind😉, así si hago una app en react native y una web con next se me va hacer más fácil compartir estilos
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?