https://github.com/pedro-donoso/curso-tailwind

Aplicación que muestra cards con imágenes, títulos, autor y descripción de cursos de programación, sitio web responsivo y escrita con clases TailwindCss
https://github.com/pedro-donoso/curso-tailwind

tailwind tailwindcss

Last synced: about 2 months ago
JSON representation

Aplicación que muestra cards con imágenes, títulos, autor y descripción de cursos de programación, sitio web responsivo y escrita con clases TailwindCss

• Host: GitHub
• URL: https://github.com/pedro-donoso/curso-tailwind
• Owner: pedro-donoso
• Created: 2024-01-23T00:47:44.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-04-03T17:58:37.000Z (10 months ago)
• Last Synced: 2024-04-23T20:50:22.849Z (9 months ago)
• Topics: tailwind, tailwindcss
• Language: HTML
• Homepage:
• Size: 10.3 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![cards](https://github.com/pedro-donoso/curso-tailwind/assets/68760595/fc930ad0-a816-44d2-9dd0-84dde7b696a4)

## https://tailwind-noticias.netlify.app/

### curso-tailwind

#### 1. Iniciar npm:

`npm init -y`

#### 2. Instalar tailwindcss en las dependencias de desarrollo:

`npm install -D tailwindcss`

#### 3. Ignorar carpeta node_modules:

Crear archivo .gitignore -> agregar node_modules

`/node_modules` (la carpeta se sombreará)

#### 4. Creo archivo de configuración de tailwind:

`npx tailwind init`

utilizo expresion regular ['./*.html'] (indico que todos los archivos utilizaran tailwind y el index.html)

#### 5. Compilar archivo de salida css cada vez que se realice algun cambio:

`npx tailwindcss -i tailwind.css -o styles.css`

indico archivo base que utilizara para compilar y nombre del archivo de salida

#### 6. Agrego compilador vite al proyecto:

`npm i -D vite postcss autoprefixer`

#### 7. Configuro postcss:

`npx tailwindcss init -p`

#### 8. Agrego scripts a package.json:

    "dev": "vite dev",

    "build": "vite build",

    "preview": "vite preview"

#### 9. Reemplazo archivo tailwind.css en index.html y vite lo compilara:

  ``

#### 10. Ejecuto seervidor vite para correr appicación:

`npm run dev`

#### 11. Creo archivo de producción:

`npm run build`

se crea la carpeta dist con assets y archivos index.html y css para producción

#### 12. Visualizar archivo:

`npm run preview`