Tailwind CSS

[pfudi]

Salve,
mi interessa il corso di Tailwind CSS Framework.
Nella seconda lezione "Installazione e file di configurazionje" devo creare devo creare un file .css. Dove devo salvare questo file? In quale cartella?
Vi ringrazio per la vostra risposta.
Pfudi

[KillerWorm]

Ciao, personalmente non l'ho mai usato ma, da quel che ho letto, il file css (quello iniziale, prima che sia compilato) va creato e messo nella cartella principale del tuo progetto.

[pfudi]

Ciao, ti ringrazio per la risposta. Ho capito. Il resto, penso, sia chiaro. Ti aurugro un buon pomeriggio!

[Manuelk]

Ciao, sfrutto il tuo thread per argomentare su tailwind....spero non ti dispiaccia ... interessa anche a me, ma fa arrabbiare fin da subito nella sua installazione a quanto pare... Faccio copia incolla del thread che volevo fare io...

Tanto per andarci giù pesante sto provando tailwindcss....ad installarlo correttamente pare che già in partenza si faccia desiderare...

Per ora non riesco a gestire l'autocompletamento su vscode...ho provato ad installare il plugin ma non lo interpreta....ho già trovato l'argomento sul sito ufficiale, ma il video è in inglese e parla a mitraglia, devo studiarmi punto per punto.

Riguardo la spiegazione scritta sull'installazione sul loro sito è spiegata in modo superficiale e peggio tendono ad appoggiarsi a altri tool. Anche su questo dito ho notato un articolo sull'installazione e uso, ma manca di qualche dettaglio e chiarezza.....
Ho trovato la risposta su medium.
https://medium.com/html-all-the-thin...s-b4dc5431385a

Visto che mi son segnato i passi, a chi fosse interessato metto sotto la mia guida per usarlo con vscode...ma come detto per ora non interpreta l'autocompletamento nemmeno con il pluging.


Nella sezione screencast del sito ufficiale ci sono i video per installarlo, usa altri modi e dovrò capire ogni passaggio leggendomi la documentazione...ad una prima occhiata pare che si debba configurare un json e aggiungere qualche opzione in fase di installazione...devo approfondire l'utilità..... sotto metto i link.

/* nella cartella del progetto*/
npm install talwindcss -D  /* equivale a  --save-dev*/

/* nella cartella del progetto*/
Creare 2 file:
index.html e style.css 

/*Dentro index.html inserire la struttura base del progetto e mettere il link 
al file (output.css) che verrà creato in seguito con il comando npx: */
<link rel="stylesheet" href="output.css">

/*Dentro style.css inserire: */
@tailwind base;
@tailwind components;
@tailwind utilities;

/*Entrare nella cartella dove è posizionato il file style.css e da CLI digitare:*/
npx tailwind build style.css -o output.css

dovrebbe aver creato il file output.css e vedere a terminale:

  tailwindcss 1.1.2
  
    Building... style.css
  
   ✅ Finished in 838 ms
    Size: 854.59KB
    Saved to output.css

Verifica di base:
Andare sul sito ufficiale : https://tailwindcss.com/components/navigation
Copiare il codice di qualche component e provare.

Problema attuale non va il plugin su vscode...


Siti interessanti:
https://tailwindcomponents.com/components
https://www.tailwindtoolbox.com/setup

qua ci sono videocorsi... sezione screencast
https://tailwindcss.com/course/setting-up-tailwind-and-postcss/


Il problema grosso è che probabile si debba imparare il tool di sviluppo che adottano loro se si vogliono gestire siti importanti e questo aggiunge complessità...
https://postcss.org/

anche se alla fine è sempre js...

Se mi stufo passo a provare bulma + jquery o diretto a boostrap.

oppure diretto css...come penso facciano tante aziende che si producono il proprio framework interno e qualcuno ogni tanto, come si vede, lo rende pubblico...

[Manuelk]

ho trovato il problema del plugin tailwind intellisense di vscode...
putroppo con rammarico e un po' di veleno addosso noto che chi
fa le guide le fa da schifo o non le fa proprio!

basta andare nei settaggi

ctrl ,

estensioni>taiwindcss e spuntare su Emmet completitions

che rabbia...

[Manuelk]

ora mi manca capire come fare il deploy di un app perché a occhio il file output.css è 800KB circa e non credo proprio che debba avere delle dimensioni del genere...