WT_TailwindCss-Vue-JS

In diesem Workshop werden zunächst die Grundlagen des Vue.js-Frameworks gegeben und die Tailwind-Klassen in Vue-Komponenten verwendet. Der Schwerpunkt des Workshops liegt auf dem Utility-FirstCSS Konzept und TailwindCSS

Um nicht jedes Mal Utility-first-CSS schreiben zu müssen (da es im Prinzip immer dasselbe ist), ist es sinnvoll, dafür ein CSS-Framework zu verwenden, TailwindCSS ist eine tolle Option.TailwindCSS ist ein schnell wachsendes CSS-Framework, mit dem man Änderungen am Design von Websites und Anwendungen vornehmen kann, ohne das HTML-Markup zu verlassen und ohne das Style-Tag zu verwenden.

Im Verlauf des Workshops werden hauptsächlich die grundlegenden Konzepte und Funktionen beleuchtet. Mit den Erfahrungen aus dem Workshop, soll es den Teilnehmern möglich sein eigenständig darauf aufzubauen.In erster Linie hat der Workshop das Frontend im Fokus. Vorkenntnisse in HTML, (S)CSS und JS sind für die Teilnahmen von Vorteil.

Vorraussetzungen

• IDE : VS-Code installieren
• Browser : (Im Workshop benutzen wir Chrome)
• Node.js (yarn auch möglich, im Workshop aber nicht behandelt)
• Kenntnisse in Javascript und CSS ist hilfreich

Vorbereitungen

• Github Repository zum Workshop clonen .

  cd wt-vue-tailwind
  npm install
  npm run dev

• Nun sollte der Server erreichbar sein unter http://localhost:3000/

• Vue installieren (node oder yarn)

• TailwindCSS installieren

Material

• Vue.js Dokumentation
• Tailwindcss Dokumentation
• Github Repo mit Aufgaben
• Folien (später im Github Repo)

Hilfreiche Quelle

• State of CSS 2021