Discussion :

[ouldfella]

bonjour
j'ai suivi l'installation sur cette page :

https://tailwindcss.com/docs/installation

4 jours et je n'ai pas encore pu utiliser une page hello word

je me demande comment ils appellent ça un framework ????

[ze0ne]

Bonjour
Tu essaye avec qu'elle méthode ? CLI ?

[ouldfella]

merci pour votre réponse
j'utilise CMD de windows

je suis entrain de suivre les étapes de ce site :
https://tailwindcss.com/docs/installation

[ze0ne]

Ok, donc c'est bien avec la méthode CLI (Commande Line Interface).

C'est certainement la méthode la plus complexe, tout dépend de ton besoin mais si c'est juste tester le framework, il y a des méthodes plus simples (ex: cdn)

[ouldfella]

merci
d'apres les concepteurs du tailwind css
c'est déconseillé la méthode cdn
-------
leur message :

Hello!

you can use PlayCDN in principle, but this solution is not recommended for production and is not supported by WebStorm (https://youtrack.jetbrains.com/issue/WEB-55695)

Best regards,
Lena

ils développent des frameworks pour nous faire perdre du temps

[ze0ne]

C'est ce que je disais, tout dépend du besoin
Pour créer une page assez basique pour tester le framework, le système de grille... le cdn suffit.

En revanche, si tu veux créer une vraie application, c'est certain que tu vas avoir besoin de quelque chose de plus robuste, dans ce cas la CLI ou la méthode PostCSS est conseillée.
Dans ce deuxième cas, tu vas avoir besoin de quelques notions de javascript ou en cas connaitre les fondamentaux, notamment la gestion de dépendance avec npm...

[ouldfella]

j'ai suivi toutes les étapes de l'installation.
mais en vain, c'est du css ce n'est pas une application qui gère les missiles nucléaires
je ne vois pas pourquoi ils ont compliqué sont utilisation.
4 jours et je n'ai pas encore installé CSS,

[ze0ne]

Les applications webs modernes ne sont plus aussi simple que jadis à déployer si on veut faire cela proprement.
Utiliser une méthode comme celle exposée permet de mieux configurer le framework pour son propre usage.

Si tu ne sais pas utiliser node/npm/npx... je peux détailler la méthode d'installation en fonction de ton environnement de travail.

[ouldfella]

Utiliser une méthode comme celle exposée permet de mieux configurer le framework pour son propre usage.

ils ont développé un framework, ils pouvait aussi rédiger un document explicatif comment l'utiliser

[ze0ne]

Si tu ne sais pas utiliser node/npm/npx... je peux détailler la méthode d'installation en fonction de ton environnement de travail.

[ouldfella]

merci pour votre réponse,
même leur support n'ont pas pu savoir pourquoi ils fonctionne pas le css
grave

je crois que je vais me contenter pour le moment bootstrap tres simple et complet

[ze0ne]

C'est assez simple en fait, c'est juste qu'il faut installer node sur son environnement de travail.
Je viens de le faire et cela m'a pris moins de 5min

[ouldfella]

bonjour,

j'ai désinstallé node et je l'ai réinstaller ainsi je l'ai mis à jour, pour enlever le doute que ça soit node qui cause problème.

ensuite j'ai suivi les étapes pour l'installation de tailWind css.

npm -v me donne la version 8.12.1
avec toujours un warning :

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

j'ai essayé d'enlever ce warning mais en vain, j'ai modifié même le fichier node.cmd

donc peut être il y a confil au niveau windows ???
si c'est le cas c'est très grave, parce que tailwind css c'est juste un fichier css, il faut pas compliquezr son installation à ce point.

[ze0ne]

Que ce passe t-il quand tu fais "npm install -D tailwindcss" ?

[ouldfella]

voilà ce qui s'affiche :

added 3 packages, changed 1 package, and audited 64 packages in 9s

12 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

et après : npx tailwindcss init

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

Created Tailwind CSS config file: tailwind.config.js

tailwind.config.js est créé

ensuite :
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

Rebuilding...

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
Done in 319ms.

[ze0ne]

Donc si tu suis les instructions du site.
La prochaine étape c'est de compléter le fichier tailwing.config.js.

Ensuite créé un dossier src à la racine du projet, dans lequel tu créé un fichier input.css.

Tu complète le fichier input.css et tu lance la commande de l'étape 4.

[ouldfella]

oui j'ai complété tout et il crée automatiquement le fichier dist/input.css
j'ai vérifié même ma page index.html integre le fichier css sans erreur, mais ou sont les classes du css ????

c quoi l'utilité de tailwind css ??

[ze0ne]

Les class sont dans le fichier dist/output.css.

L'intérêt ? C'est un framework css, rien de plus.

[ouldfella]

L'intérêt ? C'est un framework css, rien de plus.

un framework ???? 6 jours je n'ai pas pu l'installé, en 6 jours j'aurais créé un framework que de m’emmerder de l'installation

en plus de quelle classes vous parlez j'ai fait un Hello word

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="output.css" rel="stylesheet">
    </head>
    <body>
        <h1 class="text-3xl font-bold underline">
            Hello world!
        </h1>
    </body>
</html>

les classes text-3xl font-bold underline n'existe pas dans le fichier output.css

[ze0ne]

L'installation doit prendre en moyenne 5min quand on sait comment fonctionne node/npm.

Dans mon installation, les 3 class existent bel et bien.

Par contre si vous avez suivis les intructions à la lettre, le fichier output.css n'est pas au même niveau que le fichier index.html.

Il faut donc changer le href par ../dist/output.css

Je viens juste de le faire en me basant sur le "Hello World"