Sehr gut erklärt! Danke ... Ein paar Tage hat mir gekostet, endlich eine Lösung zu finden. Was es noch nich klappt ist: "" ... D.h. in größeren Displays 3 cols zu zeigen ... Vielen Dank! Nochmals, es ist ein Super-tutorial!
Hallo Mario, vielen dank. Ich nutze Angular, Angular material und seit dieser Woche auch TailwindCss. Deine Tipps haben mir sehr weiter geholfen. Danke dir.
Servus Mario, bin zufällig auf dein Kanal gestoßen und möchte kurz mein Feedback abgeben. Ich finde deine Videos echt gut gemacht, verständlich erklärt und deine Art ist einfach unschlagbar gut. Machmal hauste aber auch ordentliche Knaller raus, wie zum Beispiel hier bei 43:55 - da bin ich echt lachend vom Hocker gekippt. Aber Spaß beiseite, vielen Dank für das Tailwind Video, mir hat es beim Einstieg sehr geholfen. Mach weiter so und ich wünsche dir alles Gute, du rockst das schon! Ich freue mich auf weitere spannende Videos von dir. Schöne Grüße aus Bayern.
Vielen Dank für Deine tollen Videos. Du kannst es super verständlich erklären. Kannst Du vielleich mal ein Tutorial erstellen über den Aufbau einer Responsiven Navigation ? Wäre echt super.
Servus Mario geile Video weiterhin !! Ich hab jetz einen Monat Praktikum hinter mir und werde in Zukunft auch 25 in der Agentur beschäftigt sein Wir arbeiten viel mit Tailwind und ich beschäftige mich damit wäre geil wenn noch mehr tailwind Videos kommen
@@ProgrammierenMario ich finde sehr gut dass Du nicht so schnell alles durchratterst. Gibt ja Leute, die reden 20x so schnell. Mir hilft das total mich besser zu konzentrieren.
@@ProgrammierenMario Hätte noch eine Idee für ein Tutorial, und zwar wieso man Heutzutage Package manger benutzt wie zB Bower, und wie man mit diesen Tools arbeitet, das die Sachen über die Console laufen usw, als mich würde die ganze Philosophie dazu mal interessieren. Evtl ist das aber auch zu speziell, aber mir scheint das fast alle Full Stack Programmiere damit arbeiten.
Ich werde es mir notieren, vielen Dank 🙏 Warum das fast jeder nutzt? Nun es ist sehr komfortabel damit alle externen Pakete zu verwalten welche man für sein Projekt nutzt bzw. aus welchen man sein Projekt erstellt. 🤷♂️
Konnte mich null entscheiden ob Bootstrap oder Tailwind, also hab ich beides mal probiert und Tailwind gefällt mir sehr gut weil man sehr frei ist und viel customizen kann. Und vielen Dank für deine Videos.
Hallo Mario. Darf man Tailwind CSS auch kostenlos für Internetseiten verwenden, die man dann kommerziell anbieten will ? Oder muss man dann eine Lizenz an Tailwind CSS zahlen ? Viele Grüße
Hi Sonja, Tailwind läuft unter der MIT License. Also ja du kannst es kommerziell nutzen. Nähere Infos findest du z.B. hier -> github.com/tailwindlabs/tailwindcss/blob/master/LICENSE
Ja das ist damit möglich. Schau bei Tailwind einfach mal nach hover oder animation. Dann findest du die CSS Klassen dazu. Bei meiner aktuellen Videoreihe verwende ich ebenfalls Tailwind, falls du da mal reinschauen magst --> ruclips.net/p/PLnqycjkeRGqn6lFzLQozYoby6hRc_bvg0
Was meinst Du zum Thema einbinden von freien Icons? Svg Verlinkungen auf andere Seiten, oder doch Liebesdienste icons direkt im eigenen Ordner? Ich bin ja ein Fan von eigenen Ordner, den hat man im Griff. Was meinst Du?
Ja das kommt darauf an wie verlässlich die Ressource ist. Fällt diese aus oder es kann aus irgendwelchen Gründen die Icons nicht geladen werden ist das ärgerlich. Dann lieber die Icons lokal im Projekt haben. Wenn die Icons jedoch im CDN liegen dann bist du ziemlich sicher. Wenn das ausfällt dann geht sowieso das halbe Internet nicht mehr ;)
@@ProgrammierenMario Das heisst, Du würdest auch empfehlen über cdn zu arbeiten, anstatt tailwindcss zu installieren und entsprechend ein build zu erstellen und die css im projekt zu haben?
Nein bei Tailwind ist das was anderes. Wenn du es übers CDN verwendest hast du immer das komplette Paket was geladen werden muss und du hast nicht die ganzen Vorteile wenn du dein eigenen Build erstellst. z.B. "JIT", eigene Klassen etc...
Hey Mario, ich habe ein kleines problem, ich möchte ein mobile-menu einfliegen lassen. aktuell habe ich es so gelöst:
.... dann toggle ich über einen button die classList '-translate-x-full' Das funktioniert soweit ganz gut. allerdings würde ich es gerne von rechts einfliegen lassen. wenn ich allerdings das "-" vor dem translate weg lasse, dann wird die Seite nach rechts vergrößert und man sieht das Menü. hättest Du eine Idee, wie man das lösen kann?
Ich weiß zwar nicht im Detail wie den HTML Gerüst ausschaut, aber es klingt danach als würde ein overflow: hidden für den body helfen. Unter umständen musst du dann auch deinem body eine Breite festlegen. z.B. 100vw oder 100%
@@ProgrammierenMario zusatz: funzt am rechner, aber auf dem Habdy kann man nach rechts scrollen und sieht das menü. kann man das irgebdwie abstellen? Ps. hatte auch schon die Idee es nach oben zu schieben, aber dann liegt es über der Navbar und ich bekomme es einfach nicht mit dem z-index drunter gelegt. Liegt ein absolute div immer über einem Sticky? Habe bspw. die Navbar mit z-50 und das Menü mit Z40 oder Z0, trotzdem liegt es, wenn es nach oben geschoben ist über der navbar. bin am verzweifeln Edit: Nach oben habe ich hin bekommen: Habe folgende Struktur: nav navbar navmenue (verschiebt sich mit anklicken eines Buttons) /nav hatte das nav sticky und auf z-50 gesetzt. dann nur navmenue auf absolute und z-40 gesetzt. musste aber noch navbar auf sticky und z-50 setzen und bg geben, dann funktionierte es. aber wie ist das mit dem rechts raus schieben? Ps. Hast Du Erfahrungswerte, ob ein Menü von oben, oder von der Seite besser ist / besser ankommt? und wie kann man denn vorgehen, wenn man mit dem menü den restlichen content runter schieben möchte. Einfach dort auch ein translate-y vornehmen???? beim menü konnte ich ja translate-y-full nehmen, muss man das beim content notgedrungen an feste werte des menüs anpassen? (Aktuell legt sich das Menü einfach drüber. (Ich weiß viele Fragen, aber wäre dir sehr dankbar für deine antworten.
Für sehr viele Frameworks etc. wo man z.B. auch dynamisch die Seiten generieren kann gibt es in der Online Doku Integration Guides. Wie das nun beim Contao CMS aussieht weiß ich leider nicht. Hatte bisher nicht das Vergnügen mich mit diesem CMS auseinanderzusetzen ;-)
Genau das probiere ich gerade. Hab mir in der Contao-Installation diese Struktur angelegt: files/theme/tailwind. Hier ist alles drin wie es Mario beschreibt, also /public und /src samt Inhalt, die package.json und die tailwind.config.js. Damit der Purge funktioniert, verweise ich in der tailwind.config.js auf das Contao-Template-Verzeichnis, bei mir so: purge: [ '../../../templates/Tailwind/*.html5' ], In deinen Layouts bindest du dann die style.css ein, bei mir files/theme/tailwind/public/style.css purge kann mit safelist auch tw-Klassen berücksichtigen, die im Contao-Backend eingetragen werden.
@@MarkusSchnagl Sorry für die späte Antwort. Vielen Dank für deinen Tipp, ich werde es nächstens, gem. deinem Ansatz, versuchen einzubauen. Da ich aber wieder zurück zu Typo3 bin, nicht mit Contao, .... wird schon klappen
Hey Mario, ich habe einen Div, welche ein fieldset eine legend, diverse label und input felder enthält. Diese Div habe ich positioniert und die elemente darin wiederum absolut in der div positioniert. Würde es sinn machen das mit einem grid system zu machen, anstatt der absoluten positionierung, oder wäre das zu übertrieben? Ich habe es nun schon prozentual positioniert, damit es sich mit der Auflösung gut anpasst.... aber trotzdem verschiebt es sich alles. Wäre das mit einem "feinmaschigen" grid system und dem entsprechenden einnehmen der grid elemente besser? Was meinst Du dazu? oder wie löst Du so etwas? Möchte ja lernen und bin erst einmal für alles offen.
Bei einem Formular mache ich es oft so das ich die Elemente darin einfach im normalem Fluss lasse. Also nicht absolut positioniert sondern einfach untereinander wie sie kommen. Wenn ich z.B. die label neben den input feldern positionieren möchte, dann gruppiere ich diese und verwende sehr oft einfach nur float. Wenn es komplexer wird dann ist flexbox die nächste Wahl. Ein Grid ist in den meisten fällen für ein Formular etwas übertrieben.
@@ProgrammierenMario OK, also ich habe bspw. einen Teil, welcher innerhalb eines fieldset liegt. Hier habe ich im prizip 3 eingaben. Alle liegen untereinander. links label, dann input, dann wieder ein label zur einheitenanzeige. Ich möchte nun, dass jeweils das beschreibende label untereinander liegt, jeweils das input feld und jeweils die einheit. Wie würdest Du das klösen? mit flex? wie geht das, dass die untereinander sind? ps. positionierst du innerhalb eines div gar nicht? bion ja echt neu in der thematik, aber kann mir es aktuell noch nicht so wirklich vorstellen.
@@ProgrammierenMario Hi Mario, also ich habe es jetzt mal stundenlang versucht. Mit float und flex bekomme ich es einfach nicht hin. Mit absolute Positionierung funktioniert es, aber beim Seiten verkleinern verschiebt es sich dann doch. Mit Grid habe ich es jetzt denke zufriedenstallend erst einmal als "Muster" hin bekommen. Habe ein grid mit grid-cols-11 angelegt. dann dem ersten div col-span-4, dem zweiten col-span-1, dem dritten, col-span-3 und dem vierten col-span-2 gegeben. Das ist jetztz quasie eine Reihe meines formulars. im ersten div steht das label, danach ein kleines icon, dann kommt der input oder das select, dann die Einheit. Spricht aus deiner Sicht irgendwas dagegen dies so zu machen? Ist natürlich sehr speziell, aber mit absoluter positionierung verschiebt sich dann alles. Positionierst Du denn überhaupt Divs auf der Seite absolut, oder versuchst Du absolute Positionierung zu vermeiden? Alles mit Grid ist natürlich aufwendig und nicht schnell veränderbar, aber doch schon genau, oder? Ps. Wie kann ich denn am besten ein Grid über Bilder legen? Danke für die Antwort vorab.
Hat man auch eine Möglichkeit wie text-size-flexible? oder so? Habe das Problem, dass ich ein Bild imHintergrund habe und wenn dieses kleiner gezoomt wird durch den browser, dann ist die mit lable drüber gelegte schrift im verhältnis zu groß.
So eine Klasse gibt es leider nicht. Du kannst aber mithilfe der breakpoint prefixes die Schriftgröße dynamisch anpassen --> tailwindcss.com/docs/font-size#responsive
Hi, ich habe nun auf meinem eigentlich Arbeitsrechner node.js installiert. bekomme aber beim eingeben von npm install tailwind folgendes zum schluss angezeigt: + tailwind@4.0.0 updated 1 package and audited 186 packages in 12.859s found 11 vulnerabilities (3 low, 1 moderate, 7 high) run `npm audit fix` to fix them, or `npm audit` for details auch wenn ich npm audit fix eintrage, findet er später im run dev nicht die defaulttheme. Was kann das denn wieder sein?
@@ProgrammierenMario oh man, das muss ich dann morgen nochmal machen. ps, was ist denn nur tailwind und warum ist auf der seite beim "npx tailwindcss init" nichts mit @latest hinterlegt, so wie Du es gemacht hast und dein beschriebenes "npm install tailwindcss" wird auf der seite so beschrieben: "npm install -D tailwindcss@latest postcss@latest autoprefixer@latest" was ist denn nun richtig?
Nun es gibt verschiedene Möglichkeiten wie man sich sein Projekt einrichten kann. Ich habe dir nur eine davon in meinem Tutorial gezeigt. Das @latest besagt das du die letzte Version installieren oder benutzen willst. Ist aber nicht zwingend notwendig. Wenn du es nicht angibst dann wird automatisch die letzte Version genommen. Wenn du npx verwendest dann installierst du keine Pakete, sondern das jeweilige Paket wird nur für die einmalige Verwendung heruntergeladen und direkt ausgeführt. Bei npm install installierst du ein Paket wirklich dauerhaft für dein Projekt und es wird im node_modules Ordner deines Projektes hinterlegt. Dann kannst du diese Pakete oder Teile davon direkt in dein Projekt einbinden und nutzen. Bei Tailwind nicht zwingend notwendig, da hier immer eine CSS Datei generiert wird, welche dann ins Projekt eingebunden wird. Deswegen nutze ich hier einfach nur npx.
Danke Danke Danke für die vielen Antworten und deine Geduld ;-) Ich habe gerade das Background image über die extend Funktion in der config erweitert. Wie bekomme ich es nun allerdings hin dass wenn ich bspw. ein Grid habe, dass nicht auf jedem als hintergrund der linke obere Anfang eines Bildes zu sehen ist, sondern sich das Bild in seinem Verlauf auf die Grid Elemente aufteilt? Geht das? Viele Grüße :-)
Vielen Dank ;) Also theoretisch wenn du beim parent Element das Image als Hintergrundbild verwendest sollte es sich über das gesamte Element platzieren.
@@ProgrammierenMario Ja, aber dann liegt es hinter den Grid elementen, ich möchte ja, dass es in den grid elementen ist und nicht dazwischen im hintergrund. Weißt Du wie ich meine?
Ja aber würde das visuell einen Unterschied machen? Haben die Grid Elemente einen transparenten Hintergrund? Weil dann könntest du es so machen. Wie soll es denn visuell aussehen?
Hey Mario, dein liebster Fragensteller ist wieder da ;-) Ich habe folgendes vor: Bei einem Bestimmten Wert eines Parameters wird folgendes gemacht: ele.classList.add("animate-pulse"); dies wir auch später wieder mit remove gelöscht. Mein Problem ist nun, dass wenn ich einen produktiven Build erstelle dies wohl nicht in der style.css drin steht. Kann man das irgendwie angeben, oder sollte es einfach im html schon drin stehen und beim laden der Seite mit remove raus genommen werden?
Wenn du Tailwind Klassen auch in JavaScript Dateien verwendest, dann musst du diese in der Config bei purge mit angeben, z.B. purge: [ "./public/*.html", "./public/*.js" ],
Wird schon so sein, oder es wird explizit nach den Klassennamen in der Datei gesucht. Habe mich bisher nur darüber gefreut das es funktioniert. Wie das jetzt im Detail bei Tailwind funktioniert, da hatte ich bisher keine Zeit mir das anzuschauen. Manches darf ruhig eine magische BlackBox bleiben. ;)
hallo mario, wollte mal tailwind testen, doch habe ich festgestellt, dass vorausgefüllte formularfelder leer bleiben wenn ich es einbinde. hast du spontan eine idee?, bootstrap macht das nicht.
Meinst du mit vorausgefüllt das value attribute vom Formularfeld, oder placeholder? Hat ja eigentlich erstmal nichts mit Tailwind oder Bootstrap an sich zu tun.
Wenn du Tailwind v2 verwendest dann sind nicht alle Farben in der Standard Konfiguration enthalten. Wie du diese jedoch aktivieren kannst zeige ich in diesem Video --> ruclips.net/video/0C-qB8-addE/видео.html Bei Tailwind 3 müssten aber alle Farben out-of-the-box dabei sein.
Frage zu den Breakpoints: ich habe jetzt diese hier noch in der config hinzugefügt: screens: { '2xs' : '320px', 'xs': '480px', '3xl': '1600px', }, das ist die html Zeile um die es geht: (Nur zum Testen)
es erscheint allerdings nur die Farbe von xs, oder 3xl. Was kann das sein? Habe ich nen Fehler eingebaut und übersehen?
Das ist ein bekanntes Problem. mit extend { screens ... } kannst du nur größere Schritte hinzufügen, weil alles nacheinander im CSS angeordnet wird. wenn du kleinere breakpoints damit definierst stimmt die Reihenfolge im CSS nicht mehr. Es gibt aber Lösungen wie du das machen kannst... alle hier anzusprechen würde zu viel sein. Schau dir diese Seite mal ausführlich an, gerade den Bereich extending, da wird es gut beschrieben und alle Varianten mit Beispielen gezeigt. tailwindcss.com/docs/breakpoints#extending-the-default-breakpoints
@@ProgrammierenMario OK, von der Seite hatte ich ja meine Vorlage. Müsste dann wahrscheinlich die defaultwerte mit angeben und nicht über extends gehen. richtig?
@@ProgrammierenMario ok, werde ich mal versuchen. Seltsam, dass das Tailwind nicht gefixt bekommt. Wie bekomme ich denn jetzt die Sache mit den eigenen Klassen hin, dass diese auch mit den Breakpoints nutzbar sind?
@@ProgrammierenMario was hat es mit der tailwindcss auf sich? die kann man wohl auch einbinden und dort auf die default werte verweisen? Habe sie nun händisch eingetragen (Die Breakpoints). Ist das mit der tailwindcss notwendig/ empfehlenswert?
Hallo, ich habe den iobroker am laufen. Dort ist ja auch node.js integriert. Sollte man eine separate Version installieren? Wenn ja, gibt man dann im VS-Code an, auf welche er zugreifen soll?
Du kannst auch bei einem Nodejs Projekt ganz normal Tailwind via NPM hinzufügen wie in dem Guide auf der offiziellen Seite. Wie das jetzt im Detail bei iobroker aussieht kann ich leider nicht sagen. Hatte noch nie das Vergnügen dies zu verwenden ;)
Gibt es ein gutes deutschsprachiges Tailwind Forum? Bin gerade etwas am probieren. Bei mir hakt es schon an kleinigkeiten. Möchte Quasi dein Beispiel nachbauen, das hat soweit funktioniert. Jetzt aber die elemente zu positionieren und bspw. einen Text an eine stelle in einem Bild setzen das klappt irgendwie nicht. Dass dann noch respnsive... Frabenwechsel? Muss dann wieder über js erledigt werden, oder?
Hallo Benjamin, leider ist mir ein deutschsprachiges Tailwind Forum nicht bekannt. Bzgl. der Positionierung lässt Tailwind keine Wünsche offen. Alles vorhanden angefangen bei position über flex bis zu grid ist alles mit dabei. Wenn du Text über ein Bild legen willst sollten die Klassen zu position reichen. Schau dir mal die Breakpoint Prefixes an um für andere Auflösungen ein anderes verhalten zu definieren. Falls du mit Farbwechsel meinst das sich die Farbe per Mouseover ändern soll, da gibt es den Prefix hover den du vor jede Klasse setzen kannst, also somit auch für die Farben, siehe tailwindcss.com/docs/hover-focus-and-other-states#hover
@@ProgrammierenMario danke für die Infos. Ich führe mit einem js Berechnungen durch und je nach Ergebnis sollen die Werte entsprechende Farben annehmen. Zum positionieren: ich habe ein Bild und danach kommt ein Element, wie in deinem Beispiel. Beide sind in einer div. Aber ich bekomme sie nicht verschoben, wie ich möchte. px-40 geht noch, px-50 schon nicht mehr. Generelle Frage: wenn man doch mit bspw. px-40 verschiebt… dann sind das ja Einheit rem…. Wäre nicht % besser, denn wenn das Bild größer wird, dann passt es ja wieder nicht mit bspw. 40rem. Und warum kann man nicht negativ verschieben?
px-50 gibt es nicht ;) ... die nächst höheren sind px-44, px-48, px-52, ....usw. siehe tailwindcss.com/docs/padding Negative klassen gibt es für padding nicht. Ich empfehle dir position zu verwenden, siehe tailwindcss.com/docs/position und dann in Verbindung mit diesen Klassen tailwindcss.com/docs/top-right-bottom-left da kannst du es dann auch negativ anordnen und auch prozentual (ganz unten in der klassen tabelle) wenn du möchtest ;)
@@ProgrammierenMario Damit hatte ich es ja auch schon versucht. div auf releative gesetzt und mein text darin auf absolute. dann verschoben mit class="absolute top-28 left-20. Aber was ist wenn ich jetzt was zwischen 24 und 28 brauche? Stehe ich grad mega auf dem Schlauch? oder in %? gibts da nur diese "Brüche"? die decken ja jetzt bspw. auch keine 13.5% ab oder so. Des weiteren bleibt der Text nicht an der Stelle im Bild, wenn ich die Auflösung ändere und das Bild größer wird. etc. Hilf mir vom Schlauch runter :-D
Wenn dir bei Tailwind noch diverse Zwischenschritte fehlen wirst du nicht Drumherum kommen diese selbst anzulegen bzw. hinzuzufügen. z.B. top-24 etc. oder andere die es nicht gibt. Das kannst du in einer eigenen CSS machen und separat einbinden oder eine andere Möglichkeit wäre zusätzliche in die Tailwind Config anzugeben du hast bei fast allen Bereichen in der Online Doku einen Abschnitt Customizing, wie hier: tailwindcss.com/docs/top-right-bottom-left#customizing Da kannst du dann Werte von bestehenden Klassen ändern oder neue hinzufügen usw. Danach musste nur noch ne neue CSS Datei generieren.
Hi Mario, wäre ein Video über eine Responsive Navbar mit tailwind möglich? Ps. Ich nutze um Elemente absolut auf einem Hintergrund zu positionieren gerne die prozentuale Positionierung. Vielleicht kannst du ja mal die vor / Nachteile zur rem Positionierung darstellen? Finde es persönlich bei % gut, dass es sich halt quasi automatisch mit skaliert. Oder vielleicht hast Du ja dazu noch bessere Möglichkeiten . Viele Grüße
@@rikscc Wenn du in VSC bist drück mal F1 und schreibe "Settings JSON". Dann wähle "Open User Settings (JSON)". Hier sind alle Einstellungen welche geändert wurden. Den Inhalt kannst du mal löschen, dann die Datei leer speichern. Und danach mal testen. Vllt. hängt es an irgendeiner Einstellung.
Ich frag mich bis heute wirklich was ich davon hab sowas zu verwenden... ich möchte meine DOM Struktur clean halten und deswegen trenne ich Struktur, Design und Funktion in einzelne Files... eben html, css und js. Die derzeitige Entwicklung geht hier einen Schritt zurück...
Grundsätzlich ist es genau richtig es so zu machen wie du es beschreibst. Alles trennen und in separate Dateien ablegen. Dies hilft ungemein die Übersicht zu behalten. Streng genommen ist es aber bei Tailwind nicht anders. Die ganzen CSS Styles befinden sich in separaten Dateien. Was du hier machst ist nur die CSS Klassen zu verwenden und das macht man mit eigenem CSS nicht anders. Klar leidet hier die Übersicht im HTML Dokument um so mehr Klassen du verwendest. Aber das ist bei eigenem CSS ja nicht anders. Ein weiterer Punkt ist das bei eigenem CSS die Wiederverwendbarkeit leidet je komplexer eine CSS Klasse wird. Diese wird dann sehr speziell für eine Sache ausgelegt. Das hast du nicht wenn du die CSS Klassen so klein wie möglich hältst. Führt aber wieder zu oben genannten Problem der Unübersichtlichkeit im HTML. Du siehst hier schon das es nicht leicht ist die richtige Balance zu finden. Ein andere Punkt ist für was man Tailwind verwendet. Fürs schnelle Prototyping finde ich es persönlich ideal. So kannst du schnell und einfach Templates hoch ziehen ohne dir Gedanken um das eigentliche CSS zu machen. Es hat alles Vor und Nachteile. Es gibt auch eine Möglichkeit wie du mehrere Tailwind Klassen zu einer zusammenziehen kannst. Diese zeige ich unteranderem in diesem Video --> ruclips.net/video/0C-qB8-addE/видео.html Würde mich über weiteres Feedback freuen :)
@@ProgrammierenMario Ja das stimmt natürlich auch, normales css/scss wird auch schnell unübersichtlich. Wenn man eigene Klassen definiert und denen dann die Tailwind Klassen zuweist sorgt man auch dafür... an den Stelle könnte ma ja auch einfach die Farbe definieren anstatt eine klasse für die Farbe hinzuschreiben^^ Mein bisheriger Ansatz zum Prototyping war immer Bootstrap. Da muss man erstmal gar kein CSS schreiben um sein Layout aufzubauen. Also auch keine Klassen zweisen. Da ich Bootstrap per SCSS einbinde kann ich später alles rausschmeißen was ich nicht benutze und das ganze über die Variablen individuell anpassen. Da ich jetzt aber aktuell mit Laravel und Vue arbeite komm ich um Tailwind fast nicht herum^^ Ist etwas gewöhnungsbedürftig aber wenn man die Klassen mal kennt macht es sicher auch Sinn und Spaß^^ Danke für deine lange Antwort.
@@ProgrammierenMario ok, kann ich nachvollziehen. Das komische ist, dass ich die Seite mit Breakpoints für die Auflösung 1600x1200 optimiert habe und bei 1600x900 sind Objekte in der x Achse verschoben.
Hey Mario, was mir gerade noch in den Sinn kommt. Du hast ja schon erfahren, dass ich mir schon viele eigene Klassen und auch extends in der Config erstellt habe. Vielleicht hilft es auch Leuten, wenn DU ein Video machst, wie man am besten heraus findet, ob das gewünschte Ergebnis schon irgendwie mit Tailwind standard Dingen zu erschlagen ist. Viele Grüße
Ich weiß was du meinst, jedoch wüsste ich auch keine bessere Variante als in die Online-Doku zu schauen. Ich weiß das es sehr mühselig sein kann wegen des großen Umfangs. Habe mir persönlich angewöhnt die Suche auf der Tailwind Seite zu verwenden. Du kannst auch jederzeit mit STRG+F auf der Seite suchen z.B. nach einem bestimmten Wert, damit lässt sich schneller finden ob z.B. bei width es schon den Wert 75% gibt etc... Vllt. zeig ich das mal im Video nebenher ;-)
@@ProgrammierenMario ja die Sache ist halt auch die. Wenn man sich mit Taiwind und den Begriffen nicht so auskennt und aufgerund dessen eigene Klassen oder extentions erzeugt, die es vielleicht schon gibt, dann hat man ja den Vorteil von tailwind nicht genutzt, sondern könnte es ja gleich alles selbst machen, oder?
Jede Einheit in CSS erfüllt seinen Zweck und ist gut und nützlich. Bei Schriften verwende ich persönlich sehr gerne rem. Bei Abständen, Breiten und Höhen px, % und vw/vh, je nach Fall
Eine Frage noch :-) Kann man die Breakpoints nicht auf eigene Klassen anwenden? Ich habe eine Klasse, in der ich eine div mit einer entsprechenden Breite versehe. Dann habe ich einen build erzeugt, aber mit bspw. 2xl:MyClass (oder andere Auflösungen) funktioniert es nicht. MyClass alleine funktioniert top.
Nein von vornherein funktioniert dies nicht. Alle Varianten müssten ebenfalls erst definiert werden wenn diese auf eigene Klassen funktionieren sollen. 🤷♂️
@@ProgrammierenMario ok, und wie definiere ich diese? Muss man dann Klassen anlegen wie xl:myclass? Aber wie wird dann die Auflösung erkannt? Oder muss man irgendwie die breakpoints zuweisen? Dachte das wäre ne schöne Sache, dann so könnte man sich einzelne Klassen für die entsprechende Auflösung erstellen. …. Sonst müsste man ja doch wieder je nachdem sehr viele Standard Klassen hintereinander schreiben. Oder gibts vielleicht hat so etwas: xl:(klasse1 klasse2 klasse3) lg:(klasse4 klasse5 klasse6) ???
Ich empfehle dir mal die CSS Datei von Tailwind anzuschauen welche im dev Modus generiert wird. Da kann man sich einiges abschauen. Vielen Dank für deine Fragen. Diese geben mir viel Input und Ideen über die Inhalte meiner nächsten Tailwind Videos 🙂
@@ProgrammierenMario muss ich die Klasse dann so anlegen: .xl\:myclass{ position: relative; } oder so: @media (min-width: 1024px) { .xl\:myclass{ max-width: 1024px; } }
Uff, das ist ja echt ewig. Die 10s sind mir schon zu lange xD Eine konkrete Idee habe ich nicht. Wie viele Dateien hast du denn die Tailwind auf alle verwendeten Klassen prüft, bzw. was hast du in der config bei purge stehen?
@@ProgrammierenMario habe nur 2 html dokument, wobei eine nur die "Home" ist und di ist leer. sonst habe ich eben die 200 extend einträge mir den prozentangaben und den breakpoints. Glaube aber, dass das vorher auch schon so lange gedauert hat.
Versuche mal in der config folgendes zu setzen: // tailwind.config.js module.exports = { mode: 'jit', // ... alles weitere } Der Just-In-Time Modus erstellt nur die Klassen die du auch verwendest und es sollte wesentlich schneller sein. Wichtig dabei ist das du bei purge drin stehen hast welche Dateien der durchsuchen soll. Dieser Modus ist NEU und noch in preview. Es könnten sich also noch paar Sachen ändern oder Bugs enthalten sein. Bitte nicht produktiv verwenden. ;)
@@ProgrammierenMario werde ich mal versuchen, aber habe ich dann nach dem Build nicht das Problem, dass das was ich vorher nicht verwendet habe nicht zur Verfügung steht?
@@ProgrammierenMario Ergebnis sieht so aus: npx: Installierte 134 in 65.066s warn - You have enabled the JIT engine which is currently in preview. warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time. Done in 741ms. da wo jetzt die 741ms steht, da standen sonst ca. 140s
Vor dem Anschauen: Ok, 45 Minuten. Ich nehme Dich beim Wort. Hast Du mich belogen, ist das Abo weg! Und komm nicht hinterher und sag dass es an mir lag. Dein Titel ist da sehr eindeutig und stellt keinerlei Bedingung fuer den Lernerfolg. Nach dem Anschauen: Abo weg!
Vielen Dank für die Erläuterungen. Bist nen guter Tutor 👍🏻👍🏻👍🏻
Sehr gut erklärt! Danke ... Ein paar Tage hat mir gekostet, endlich eine Lösung zu finden. Was es noch nich klappt ist: "" ... D.h. in größeren Displays 3 cols zu zeigen ... Vielen Dank! Nochmals, es ist ein Super-tutorial!
Hallöchen, mir fällt auf das du "md:grid-3" geschrieben hast. Versuche mal "md:grid-cols-3"
Dann müsste das klappen.
Grüße... :)
Danke super verständlich erklärt. Gerne mehr über Tailwind.
Alles klar... Vielen Dank für dein Feedback ;-)
Vielen Dank, sehr verständlich!!!👍
Sehr gerne 🙂
Hallo Mario, vielen dank.
Ich nutze Angular, Angular material und seit dieser Woche auch TailwindCss.
Deine Tipps haben mir sehr weiter geholfen.
Danke dir.
Freut mich sehr! Grüße ✌️
Super cool, vielen Dank! Abo direkt da gelassen- weiter so!
Freut mich sehr :)
Vielen herzlichen Dank Mario!!!
Sehr gerne!
Einfach nur 🔝 erklärt! 👍
Vielen Dank für dein Feedback ✌️
Servus Mario, bin zufällig auf dein Kanal gestoßen und möchte kurz mein Feedback abgeben. Ich finde deine Videos echt gut gemacht, verständlich erklärt und deine Art ist einfach unschlagbar gut. Machmal hauste aber auch ordentliche Knaller raus, wie zum Beispiel hier bei 43:55 - da bin ich echt lachend vom Hocker gekippt. Aber Spaß beiseite, vielen Dank für das Tailwind Video, mir hat es beim Einstieg sehr geholfen. Mach weiter so und ich wünsche dir alles Gute, du rockst das schon! Ich freue mich auf weitere spannende Videos von dir. Schöne Grüße aus Bayern.
Vielen herzlichen Dank für dein Feedback! Grüße nach Bayern ✌🙂
Vielen Dank für Deine tollen Videos. Du kannst es super verständlich erklären.
Kannst Du vielleich mal ein Tutorial erstellen über den Aufbau einer Responsiven Navigation ?
Wäre echt super.
Hallo und vielen Dank für dein Lob. Ein Navigation Tutorial mit Tailwind steht schon auf meiner Liste. ;)
cool danke für die erklärung
Danke, es freut mich, dass es dir gefällt. :-)
Servus Mario geile Video weiterhin !! Ich hab jetz einen Monat Praktikum hinter mir und werde in Zukunft auch 25 in der Agentur beschäftigt sein Wir arbeiten viel mit Tailwind und ich beschäftige mich damit wäre geil wenn noch mehr tailwind Videos kommen
Ich schreibe es mir gerne mit auf ✌️
Sehr schön erklärt! Danke!!!
Hallo Marcel, freut mich das du reingeschaut hast. Grüße ✌️🙂
Echt toll wie gut Du das verständlich erklärst :)
Freut mich, ich versuche mir auch Zeit zu nehmen. Wie findest du das Tempo im Video?
@@ProgrammierenMario ich finde sehr gut dass Du nicht so schnell alles durchratterst. Gibt ja Leute, die reden 20x so schnell. Mir hilft das total mich besser zu konzentrieren.
Super, vielen lieben Dank für dein Feedback. Das hilft mir sehr ✌️🙂
@@ProgrammierenMario Hätte noch eine Idee für ein Tutorial, und zwar wieso man Heutzutage Package manger benutzt wie zB Bower, und wie man mit diesen Tools arbeitet, das die Sachen über die Console laufen usw, als mich würde die ganze Philosophie dazu mal interessieren. Evtl ist das aber auch zu speziell, aber mir scheint das fast alle Full Stack Programmiere damit arbeiten.
Ich werde es mir notieren, vielen Dank 🙏
Warum das fast jeder nutzt? Nun es ist sehr komfortabel damit alle externen Pakete zu verwalten welche man für sein Projekt nutzt bzw. aus welchen man sein Projekt erstellt. 🤷♂️
Konnte mich null entscheiden ob Bootstrap oder Tailwind, also hab ich beides mal probiert und Tailwind gefällt mir sehr gut weil man sehr frei ist und viel customizen kann. Und vielen Dank für deine Videos.
Genauso sollte man vorgehen. Ausprobieren, abwägen und entscheiden. Sehr gut! :)
Danke :)
Büdde ;)
Hallo Mario. Darf man Tailwind CSS auch kostenlos für Internetseiten verwenden, die man dann kommerziell anbieten will ? Oder muss man dann eine Lizenz an Tailwind CSS zahlen ? Viele Grüße
Hi Sonja, Tailwind läuft unter der MIT License. Also ja du kannst es kommerziell nutzen. Nähere Infos findest du z.B. hier -> github.com/tailwindlabs/tailwindcss/blob/master/LICENSE
Moin,
in Deinem Terminal werden Dir zu der erzeugten Css-Datei Icons mit z.B. Filesize angezeigt, ist dies eine Erweiterung (43:49min) ?
Das kommt direkt von der tailwindcss cli. Ich hatte da nix weiter installiert.
Cool
✌️🙂
Spitze!!!!
✌️🙂
Sind damit auch dynamische Hover Effekte oder auch Keyframes möglich, oder muss man dann wieder auf Vanilla CSS zurück greifen?
Ja das ist damit möglich. Schau bei Tailwind einfach mal nach hover oder animation. Dann findest du die CSS Klassen dazu. Bei meiner aktuellen Videoreihe verwende ich ebenfalls Tailwind, falls du da mal reinschauen magst --> ruclips.net/p/PLnqycjkeRGqn6lFzLQozYoby6hRc_bvg0
Was meinst Du zum Thema einbinden von freien Icons?
Svg Verlinkungen auf andere Seiten, oder doch Liebesdienste icons direkt im eigenen Ordner?
Ich bin ja ein Fan von eigenen Ordner, den hat man im Griff. Was meinst Du?
Ja das kommt darauf an wie verlässlich die Ressource ist. Fällt diese aus oder es kann aus irgendwelchen Gründen die Icons nicht geladen werden ist das ärgerlich. Dann lieber die Icons lokal im Projekt haben. Wenn die Icons jedoch im CDN liegen dann bist du ziemlich sicher. Wenn das ausfällt dann geht sowieso das halbe Internet nicht mehr ;)
@@ProgrammierenMario Das heisst, Du würdest auch empfehlen über cdn zu arbeiten, anstatt tailwindcss zu installieren und entsprechend ein build zu erstellen und die css im projekt zu haben?
Nein bei Tailwind ist das was anderes. Wenn du es übers CDN verwendest hast du immer das komplette Paket was geladen werden muss und du hast nicht die ganzen Vorteile wenn du dein eigenen Build erstellst. z.B. "JIT", eigene Klassen etc...
Hey Mario, ich habe ein kleines problem, ich möchte ein mobile-menu einfliegen lassen.
aktuell habe ich es so gelöst:
....
dann toggle ich über einen button die classList '-translate-x-full'
Das funktioniert soweit ganz gut. allerdings würde ich es gerne von rechts einfliegen lassen.
wenn ich allerdings das "-" vor dem translate weg lasse, dann wird die Seite nach rechts vergrößert und man sieht das Menü.
hättest Du eine Idee, wie man das lösen kann?
Ich weiß zwar nicht im Detail wie den HTML Gerüst ausschaut, aber es klingt danach als würde ein overflow: hidden für den body helfen. Unter umständen musst du dann auch deinem body eine Breite festlegen. z.B. 100vw oder 100%
@@ProgrammierenMario top, danke overflow-x-hidden hat schon gereicht.
@@ProgrammierenMario zusatz: funzt am rechner, aber auf dem Habdy kann man nach rechts scrollen und sieht das menü. kann man das irgebdwie abstellen?
Ps. hatte auch schon die Idee es nach oben zu schieben, aber dann liegt es über der Navbar und ich bekomme es einfach nicht mit dem z-index drunter gelegt.
Liegt ein absolute div immer über einem Sticky?
Habe bspw. die Navbar mit z-50 und das Menü mit Z40 oder Z0, trotzdem liegt es, wenn es nach oben geschoben ist über der navbar.
bin am verzweifeln
Edit:
Nach oben habe ich hin bekommen:
Habe folgende Struktur:
nav
navbar
navmenue (verschiebt sich mit anklicken eines Buttons)
/nav
hatte das nav sticky und auf z-50 gesetzt.
dann nur navmenue auf absolute und z-40 gesetzt.
musste aber noch navbar auf sticky und z-50 setzen und bg geben, dann funktionierte es.
aber wie ist das mit dem rechts raus schieben?
Ps. Hast Du Erfahrungswerte, ob ein Menü von oben, oder von der Seite besser ist / besser ankommt?
und wie kann man denn vorgehen, wenn man mit dem menü den restlichen content runter schieben möchte.
Einfach dort auch ein translate-y vornehmen???? beim menü konnte ich ja translate-y-full nehmen, muss man das beim content notgedrungen an feste werte des menüs anpassen?
(Aktuell legt sich das Menü einfach drüber.
(Ich weiß viele Fragen, aber wäre dir sehr dankbar für deine antworten.
Vielen Dank, sehr verständlich erklärt 👍🏻👍🏻👍🏻
Wie sieht das Ganze mit dynamischen Seiten (z.B. CMS Contao) aus?
Für sehr viele Frameworks etc. wo man z.B. auch dynamisch die Seiten generieren kann gibt es in der Online Doku Integration Guides. Wie das nun beim Contao CMS aussieht weiß ich leider nicht. Hatte bisher nicht das Vergnügen mich mit diesem CMS auseinanderzusetzen ;-)
Genau das probiere ich gerade. Hab mir in der Contao-Installation diese Struktur angelegt: files/theme/tailwind. Hier ist alles drin wie es Mario beschreibt, also /public und /src samt Inhalt, die package.json und die tailwind.config.js. Damit der Purge funktioniert, verweise ich in der tailwind.config.js auf das Contao-Template-Verzeichnis, bei mir so:
purge: [
'../../../templates/Tailwind/*.html5'
],
In deinen Layouts bindest du dann die style.css ein, bei mir files/theme/tailwind/public/style.css
purge kann mit safelist auch tw-Klassen berücksichtigen, die im Contao-Backend eingetragen werden.
Vielen Dank Markus, für deine Hilfe und dein Feedback 👍
@@MarkusSchnagl Sorry für die späte Antwort.
Vielen Dank für deinen Tipp, ich werde es nächstens, gem. deinem Ansatz, versuchen einzubauen.
Da ich aber wieder zurück zu Typo3 bin, nicht mit Contao, .... wird schon klappen
Hey Mario, ich habe einen Div, welche ein fieldset eine legend, diverse label und input felder enthält.
Diese Div habe ich positioniert und die elemente darin wiederum absolut in der div positioniert.
Würde es sinn machen das mit einem grid system zu machen, anstatt der absoluten positionierung, oder wäre das zu übertrieben?
Ich habe es nun schon prozentual positioniert, damit es sich mit der Auflösung gut anpasst.... aber trotzdem verschiebt es sich alles.
Wäre das mit einem "feinmaschigen" grid system und dem entsprechenden einnehmen der grid elemente besser? Was meinst Du dazu?
oder wie löst Du so etwas? Möchte ja lernen und bin erst einmal für alles offen.
Bei einem Formular mache ich es oft so das ich die Elemente darin einfach im normalem Fluss lasse. Also nicht absolut positioniert sondern einfach untereinander wie sie kommen. Wenn ich z.B. die label neben den input feldern positionieren möchte, dann gruppiere ich diese und verwende sehr oft einfach nur float. Wenn es komplexer wird dann ist flexbox die nächste Wahl. Ein Grid ist in den meisten fällen für ein Formular etwas übertrieben.
@@ProgrammierenMario OK,
also ich habe bspw. einen Teil, welcher innerhalb eines fieldset liegt.
Hier habe ich im prizip 3 eingaben.
Alle liegen untereinander.
links label, dann input, dann wieder ein label zur einheitenanzeige.
Ich möchte nun, dass jeweils das beschreibende label untereinander liegt, jeweils das input feld und jeweils die einheit.
Wie würdest Du das klösen? mit flex? wie geht das, dass die untereinander sind?
ps. positionierst du innerhalb eines div gar nicht?
bion ja echt neu in der thematik, aber kann mir es aktuell noch nicht so wirklich vorstellen.
@@ProgrammierenMario Hi Mario,
also ich habe es jetzt mal stundenlang versucht.
Mit float und flex bekomme ich es einfach nicht hin.
Mit absolute Positionierung funktioniert es, aber beim Seiten verkleinern verschiebt es sich dann doch.
Mit Grid habe ich es jetzt denke zufriedenstallend erst einmal als "Muster" hin bekommen.
Habe ein grid mit grid-cols-11 angelegt.
dann dem ersten div col-span-4, dem zweiten col-span-1, dem dritten, col-span-3 und dem vierten col-span-2 gegeben.
Das ist jetztz quasie eine Reihe meines formulars.
im ersten div steht das label, danach ein kleines icon, dann kommt der input oder das select, dann die Einheit.
Spricht aus deiner Sicht irgendwas dagegen dies so zu machen?
Ist natürlich sehr speziell, aber mit absoluter positionierung verschiebt sich dann alles.
Positionierst Du denn überhaupt Divs auf der Seite absolut, oder versuchst Du absolute Positionierung zu vermeiden?
Alles mit Grid ist natürlich aufwendig und nicht schnell veränderbar, aber doch schon genau, oder?
Ps. Wie kann ich denn am besten ein Grid über Bilder legen?
Danke für die Antwort vorab.
Super erklärt, besser geht's nicht!!!
Hallo Wolfgang, vielen Dank 🙏
Hat man auch eine Möglichkeit wie text-size-flexible? oder so?
Habe das Problem, dass ich ein Bild imHintergrund habe und wenn dieses kleiner gezoomt wird durch den browser, dann ist die mit lable drüber gelegte schrift im verhältnis zu groß.
So eine Klasse gibt es leider nicht. Du kannst aber mithilfe der breakpoint prefixes die Schriftgröße dynamisch anpassen --> tailwindcss.com/docs/font-size#responsive
Hi, ich habe nun auf meinem eigentlich Arbeitsrechner node.js installiert.
bekomme aber beim eingeben von npm install tailwind folgendes zum schluss angezeigt:
+ tailwind@4.0.0
updated 1 package and audited 186 packages in 12.859s
found 11 vulnerabilities (3 low, 1 moderate, 7 high)
run `npm audit fix` to fix them, or `npm audit` for details
auch wenn ich npm audit fix eintrage, findet er später im run dev nicht die defaulttheme.
Was kann das denn wieder sein?
Du hast das falsche Paket installiert. Was du möchtest ist „tailwindcss“ 😉
Also: npm install tailwindcss
@@ProgrammierenMario oh man, das muss ich dann morgen nochmal machen.
ps, was ist denn nur tailwind und warum ist auf der seite beim
"npx tailwindcss init" nichts mit @latest hinterlegt, so wie Du es gemacht hast und dein beschriebenes
"npm install tailwindcss" wird auf der seite so beschrieben:
"npm install -D tailwindcss@latest postcss@latest autoprefixer@latest"
was ist denn nun richtig?
Nun es gibt verschiedene Möglichkeiten wie man sich sein Projekt einrichten kann. Ich habe dir nur eine davon in meinem Tutorial gezeigt. Das @latest besagt das du die letzte Version installieren oder benutzen willst. Ist aber nicht zwingend notwendig. Wenn du es nicht angibst dann wird automatisch die letzte Version genommen.
Wenn du npx verwendest dann installierst du keine Pakete, sondern das jeweilige Paket wird nur für die einmalige Verwendung heruntergeladen und direkt ausgeführt.
Bei npm install installierst du ein Paket wirklich dauerhaft für dein Projekt und es wird im node_modules Ordner deines Projektes hinterlegt. Dann kannst du diese Pakete oder Teile davon direkt in dein Projekt einbinden und nutzen. Bei Tailwind nicht zwingend notwendig, da hier immer eine CSS Datei generiert wird, welche dann ins Projekt eingebunden wird. Deswegen nutze ich hier einfach nur npx.
@@ProgrammierenMario AH ok, also kann ich
npx tailwind.init
und
npm install tailwindcss
nutzen und alles sollte passen, oder?
Danke Danke Danke für die vielen Antworten und deine Geduld ;-)
Ich habe gerade das Background image über die extend Funktion in der config erweitert.
Wie bekomme ich es nun allerdings hin dass wenn ich bspw. ein Grid habe, dass nicht auf jedem als hintergrund der linke obere Anfang eines Bildes zu sehen ist, sondern sich das Bild in seinem Verlauf auf die Grid Elemente aufteilt?
Geht das?
Viele Grüße :-)
Vielen Dank ;)
Also theoretisch wenn du beim parent Element das Image als Hintergrundbild verwendest sollte es sich über das gesamte Element platzieren.
@@ProgrammierenMario Ja, aber dann liegt es hinter den Grid elementen,
ich möchte ja, dass es in den grid elementen ist und nicht dazwischen im hintergrund.
Weißt Du wie ich meine?
Ja aber würde das visuell einen Unterschied machen? Haben die Grid Elemente einen transparenten Hintergrund? Weil dann könntest du es so machen. Wie soll es denn visuell aussehen?
Hey Mario, dein liebster Fragensteller ist wieder da ;-)
Ich habe folgendes vor:
Bei einem Bestimmten Wert eines Parameters wird folgendes gemacht:
ele.classList.add("animate-pulse");
dies wir auch später wieder mit remove gelöscht.
Mein Problem ist nun, dass wenn ich einen produktiven Build erstelle dies wohl nicht in der style.css drin steht.
Kann man das irgendwie angeben, oder sollte es einfach im html schon drin stehen und beim laden der Seite mit remove raus genommen werden?
Wenn du Tailwind Klassen auch in JavaScript Dateien verwendest, dann musst du diese in der Config bei purge mit angeben, z.B.
purge: [
"./public/*.html",
"./public/*.js"
],
@@ProgrammierenMario Danke. Funzt.
Sucht er sich dann alle über ClasList(...) heraus?
Wird schon so sein, oder es wird explizit nach den Klassennamen in der Datei gesucht. Habe mich bisher nur darüber gefreut das es funktioniert. Wie das jetzt im Detail bei Tailwind funktioniert, da hatte ich bisher keine Zeit mir das anzuschauen. Manches darf ruhig eine magische BlackBox bleiben. ;)
hallo mario, wollte mal tailwind testen, doch habe ich festgestellt, dass vorausgefüllte formularfelder leer bleiben wenn ich es einbinde. hast du spontan eine idee?, bootstrap macht das nicht.
Meinst du mit vorausgefüllt das value attribute vom Formularfeld, oder placeholder? Hat ja eigentlich erstmal nichts mit Tailwind oder Bootstrap an sich zu tun.
Vorausgefüllt mit value, ich finde es auch seltsam, ggf. liegt der Hase woanders im Pfeffer, ist halt nur verdächtig..
Vielen Dank für die schnelle Rückmeldung. Gruß Wolfgang
Die Farben werden nicht eingefügt ... Was könnte ich machen? Für einen Hinweis, wäre ich sehr dankbar ...
Wenn du Tailwind v2 verwendest dann sind nicht alle Farben in der Standard Konfiguration enthalten. Wie du diese jedoch aktivieren kannst zeige ich in diesem Video --> ruclips.net/video/0C-qB8-addE/видео.html
Bei Tailwind 3 müssten aber alle Farben out-of-the-box dabei sein.
Frage zu den Breakpoints:
ich habe jetzt diese hier noch in der config hinzugefügt:
screens: {
'2xs' : '320px',
'xs': '480px',
'3xl': '1600px',
},
das ist die html Zeile um die es geht: (Nur zum Testen)
es erscheint allerdings nur die Farbe von xs, oder 3xl.
Was kann das sein?
Habe ich nen Fehler eingebaut und übersehen?
Das ist ein bekanntes Problem. mit extend { screens ... } kannst du nur größere Schritte hinzufügen, weil alles nacheinander im CSS angeordnet wird. wenn du kleinere breakpoints damit definierst stimmt die Reihenfolge im CSS nicht mehr. Es gibt aber Lösungen wie du das machen kannst... alle hier anzusprechen würde zu viel sein.
Schau dir diese Seite mal ausführlich an, gerade den Bereich extending, da wird es gut beschrieben und alle Varianten mit Beispielen gezeigt.
tailwindcss.com/docs/breakpoints#extending-the-default-breakpoints
@@ProgrammierenMario OK, von der Seite hatte ich ja meine Vorlage.
Müsste dann wahrscheinlich die defaultwerte mit angeben und nicht über extends gehen. richtig?
Ja du müsstest quasi das screens object überschreiben mit der richtigen Reihenfolge von klein zu groß mit allen Werten die du haben möchtest.
@@ProgrammierenMario ok, werde ich mal versuchen.
Seltsam, dass das Tailwind nicht gefixt bekommt.
Wie bekomme ich denn jetzt die Sache mit den eigenen Klassen hin, dass diese auch mit den Breakpoints nutzbar sind?
@@ProgrammierenMario was hat es mit der tailwindcss auf sich? die kann man wohl auch einbinden und dort auf die default werte verweisen?
Habe sie nun händisch eingetragen (Die Breakpoints).
Ist das mit der tailwindcss notwendig/ empfehlenswert?
Hallo, ich habe den iobroker am laufen. Dort ist ja auch node.js integriert.
Sollte man eine separate Version installieren? Wenn ja, gibt man dann im VS-Code an, auf welche er zugreifen soll?
Du kannst auch bei einem Nodejs Projekt ganz normal Tailwind via NPM hinzufügen wie in dem Guide auf der offiziellen Seite. Wie das jetzt im Detail bei iobroker aussieht kann ich leider nicht sagen. Hatte noch nie das Vergnügen dies zu verwenden ;)
@@ProgrammierenMario OK, also wäre es wahrscheinlich aber sicherer eine separate Installation vor zu nehmen, oder?
Einfach versuchen würde ich sagen. Und immer das Projekt vorher sichern...oder Git verwenden ;)
@@ProgrammierenMario Habe eine separate installation durchgeführt und mir damit nun iobroker zerschossen.
Das ist natürlich ärgerlich. Hoffe du hattest vorher alles gesichert.
Gibt es ein gutes deutschsprachiges Tailwind Forum?
Bin gerade etwas am probieren.
Bei mir hakt es schon an kleinigkeiten.
Möchte Quasi dein Beispiel nachbauen, das hat soweit funktioniert.
Jetzt aber die elemente zu positionieren und bspw. einen Text an eine stelle in einem Bild setzen das klappt irgendwie nicht.
Dass dann noch respnsive...
Frabenwechsel? Muss dann wieder über js erledigt werden, oder?
Hallo Benjamin, leider ist mir ein deutschsprachiges Tailwind Forum nicht bekannt.
Bzgl. der Positionierung lässt Tailwind keine Wünsche offen. Alles vorhanden angefangen bei position über flex bis zu grid ist alles mit dabei. Wenn du Text über ein Bild legen willst sollten die Klassen zu position reichen.
Schau dir mal die Breakpoint Prefixes an um für andere Auflösungen ein anderes verhalten zu definieren.
Falls du mit Farbwechsel meinst das sich die Farbe per Mouseover ändern soll, da gibt es den Prefix hover den du vor jede Klasse setzen kannst, also somit auch für die Farben, siehe tailwindcss.com/docs/hover-focus-and-other-states#hover
@@ProgrammierenMario danke für die Infos.
Ich führe mit einem js Berechnungen durch und je nach Ergebnis sollen die Werte entsprechende Farben annehmen.
Zum positionieren: ich habe ein Bild und danach kommt ein Element, wie in deinem Beispiel.
Beide sind in einer div. Aber ich bekomme sie nicht verschoben, wie ich möchte. px-40 geht noch, px-50 schon nicht mehr.
Generelle Frage: wenn man doch mit bspw. px-40 verschiebt… dann sind das ja Einheit rem…. Wäre nicht % besser, denn wenn das Bild größer wird, dann passt es ja wieder nicht mit bspw. 40rem.
Und warum kann man nicht negativ verschieben?
px-50 gibt es nicht ;) ... die nächst höheren sind px-44, px-48, px-52, ....usw. siehe tailwindcss.com/docs/padding
Negative klassen gibt es für padding nicht.
Ich empfehle dir position zu verwenden, siehe tailwindcss.com/docs/position
und dann in Verbindung mit diesen Klassen tailwindcss.com/docs/top-right-bottom-left
da kannst du es dann auch negativ anordnen und auch prozentual (ganz unten in der klassen tabelle) wenn du möchtest ;)
@@ProgrammierenMario Damit hatte ich es ja auch schon versucht.
div auf releative gesetzt und mein text darin auf absolute.
dann verschoben mit class="absolute top-28 left-20.
Aber was ist wenn ich jetzt was zwischen 24 und 28 brauche? Stehe ich grad mega auf dem Schlauch?
oder in %? gibts da nur diese "Brüche"? die decken ja jetzt bspw. auch keine 13.5% ab oder so.
Des weiteren bleibt der Text nicht an der Stelle im Bild, wenn ich die Auflösung ändere und das Bild größer wird. etc.
Hilf mir vom Schlauch runter :-D
Wenn dir bei Tailwind noch diverse Zwischenschritte fehlen wirst du nicht Drumherum kommen diese selbst anzulegen bzw. hinzuzufügen. z.B. top-24 etc. oder andere die es nicht gibt. Das kannst du in einer eigenen CSS machen und separat einbinden oder eine andere Möglichkeit wäre zusätzliche in die Tailwind Config anzugeben du hast bei fast allen Bereichen in der Online Doku einen Abschnitt Customizing, wie hier: tailwindcss.com/docs/top-right-bottom-left#customizing
Da kannst du dann Werte von bestehenden Klassen ändern oder neue hinzufügen usw. Danach musste nur noch ne neue CSS Datei generieren.
Hi. Erst mal danke für die hilfreichen Antworten.
Könntest Du ein Video über eine responsive navbar mit tailwind machen?
Das wäre top.
Ja gerne kein Problem 🙂
Ein Navigation Video mit Tailwind steht bei mir schon auf der Liste ✌️
Hi Mario,
wäre ein Video über eine Responsive Navbar mit tailwind möglich?
Ps. Ich nutze um Elemente absolut auf einem Hintergrund zu positionieren gerne die prozentuale Positionierung.
Vielleicht kannst du ja mal die vor / Nachteile zur rem Positionierung darstellen?
Finde es persönlich bei % gut, dass es sich halt quasi automatisch mit skaliert.
Oder vielleicht hast Du ja dazu noch bessere Möglichkeiten . Viele Grüße
Hallo, ja die Anfrage habe ich schon auf meiner Liste ;)
Zu den Einheiten in CSS mach ich gerne auf meiner Ideenliste einen Vermerk für ein Video.
Hi, warum zentriert er mit nicht horizontal und vertikal den Text?
Dachte m-auto würde das machen?
Simlation der Janitza Webseite
m-auto ist für margin und dies zentriert keinen Inhalt. Ich empfehle die flex Klassen zu verwenden.
@@ProgrammierenMario ok, ich dachte m-auto sorgt dafür, dass das elemet zentriert ausgerichtet wird
@@ProgrammierenMario ich raff es irgendwie nicht.
Simlation der Janitza Webseite
bringt keine Veränderung zu dem ohne flex
@@ProgrammierenMario ich verstehe auch nicht, warum das nicht vertikal mittig ausrichtet
Simlation der Janitza Webseite
Nimm die Klassen flex, justify-center und items-center für das div Element. Mehr brauchst du nicht.
Das mit dem Grundgerüst einfügen per ! funktioniert bei mir nicht. Woran kann das liegen?
Verwendest du VS Code? Falls ja gab es mal zwischenzeitlich einen Bug wo dies nicht mehr ging, falls du noch eine ältere Version hast.
Ich habe VS Code noch mal neu installiert aber es geht nicht. Das blöde ist, das Intellisense auch nicht funktioniert. Kann man wohl nichts machen.
@@rikscc Wenn du in VSC bist drück mal F1 und schreibe "Settings JSON". Dann wähle "Open User Settings (JSON)". Hier sind alle Einstellungen welche geändert wurden. Den Inhalt kannst du mal löschen, dann die Datei leer speichern. Und danach mal testen. Vllt. hängt es an irgendeiner Einstellung.
@@ProgrammierenMario Ja super, das hat funktioniert. Es funktioniert beides.
@@rikscc Freut mich 🙂
Ich frag mich bis heute wirklich was ich davon hab sowas zu verwenden... ich möchte meine DOM Struktur clean halten und deswegen trenne ich Struktur, Design und Funktion in einzelne Files... eben html, css und js. Die derzeitige Entwicklung geht hier einen Schritt zurück...
Grundsätzlich ist es genau richtig es so zu machen wie du es beschreibst. Alles trennen und in separate Dateien ablegen. Dies hilft ungemein die Übersicht zu behalten. Streng genommen ist es aber bei Tailwind nicht anders. Die ganzen CSS Styles befinden sich in separaten Dateien. Was du hier machst ist nur die CSS Klassen zu verwenden und das macht man mit eigenem CSS nicht anders. Klar leidet hier die Übersicht im HTML Dokument um so mehr Klassen du verwendest. Aber das ist bei eigenem CSS ja nicht anders.
Ein weiterer Punkt ist das bei eigenem CSS die Wiederverwendbarkeit leidet je komplexer eine CSS Klasse wird. Diese wird dann sehr speziell für eine Sache ausgelegt. Das hast du nicht wenn du die CSS Klassen so klein wie möglich hältst. Führt aber wieder zu oben genannten Problem der Unübersichtlichkeit im HTML. Du siehst hier schon das es nicht leicht ist die richtige Balance zu finden.
Ein andere Punkt ist für was man Tailwind verwendet. Fürs schnelle Prototyping finde ich es persönlich ideal. So kannst du schnell und einfach Templates hoch ziehen ohne dir Gedanken um das eigentliche CSS zu machen.
Es hat alles Vor und Nachteile.
Es gibt auch eine Möglichkeit wie du mehrere Tailwind Klassen zu einer zusammenziehen kannst. Diese zeige ich unteranderem in diesem Video --> ruclips.net/video/0C-qB8-addE/видео.html
Würde mich über weiteres Feedback freuen :)
@@ProgrammierenMario Ja das stimmt natürlich auch, normales css/scss wird auch schnell unübersichtlich.
Wenn man eigene Klassen definiert und denen dann die Tailwind Klassen zuweist sorgt man auch dafür... an den Stelle könnte ma ja auch einfach die Farbe definieren anstatt eine klasse für die Farbe hinzuschreiben^^
Mein bisheriger Ansatz zum Prototyping war immer Bootstrap. Da muss man erstmal gar kein CSS schreiben um sein Layout aufzubauen. Also auch keine Klassen zweisen. Da ich Bootstrap per SCSS einbinde kann ich später alles rausschmeißen was ich nicht benutze und das ganze über die Variablen individuell anpassen.
Da ich jetzt aber aktuell mit Laravel und Vue arbeite komm ich um Tailwind fast nicht herum^^ Ist etwas gewöhnungsbedürftig aber wenn man die Klassen mal kennt macht es sicher auch Sinn und Spaß^^
Danke für deine lange Antwort.
Hi Mario,
kann man mit der Breakpoints nur die Weite abfragen?
Ich habe Probleme bei den Auflösungen 1600x1200 & 1600x900.
Es ist gängige Praxis die Breakpoints nur für die Breite zu verwenden. Nach unten hin sollte immer alles offen, flexibel und scrollbar sein.
@@ProgrammierenMario ok, kann ich nachvollziehen.
Das komische ist, dass ich die Seite mit Breakpoints für die Auflösung 1600x1200 optimiert habe und bei 1600x900 sind Objekte in der x Achse verschoben.
Kannst bitte deinen letzten Satz decodieren? Oder muss ich noch paar Bier trinken um ihn zu verstehen 😂🍻
@@ProgrammierenMario 😂 sch… Autotext.
Habe das Kommentar oben geändert.
@@ProgrammierenMario denke das Problem war, dass der Bildschirm in der Auflösung auf 125% gestellt war.
Hey Mario,
was mir gerade noch in den Sinn kommt.
Du hast ja schon erfahren, dass ich mir schon viele eigene Klassen und auch extends in der Config erstellt habe.
Vielleicht hilft es auch Leuten, wenn DU ein Video machst, wie man am besten heraus findet, ob das gewünschte Ergebnis schon irgendwie mit Tailwind standard Dingen zu erschlagen ist.
Viele Grüße
Ich weiß was du meinst, jedoch wüsste ich auch keine bessere Variante als in die Online-Doku zu schauen. Ich weiß das es sehr mühselig sein kann wegen des großen Umfangs. Habe mir persönlich angewöhnt die Suche auf der Tailwind Seite zu verwenden. Du kannst auch jederzeit mit STRG+F auf der Seite suchen z.B. nach einem bestimmten Wert, damit lässt sich schneller finden ob z.B. bei width es schon den Wert 75% gibt etc...
Vllt. zeig ich das mal im Video nebenher ;-)
@@ProgrammierenMario ja die Sache ist halt auch die.
Wenn man sich mit Taiwind und den Begriffen nicht so auskennt und aufgerund dessen eigene Klassen oder extentions erzeugt, die es vielleicht schon gibt, dann hat man ja den Vorteil von tailwind nicht genutzt, sondern könnte es ja gleich alles selbst machen, oder?
@@ProgrammierenMario was ist denn deine Meinung zu den Abständen / Größen? Eher in em oder in %?
Jede Einheit in CSS erfüllt seinen Zweck und ist gut und nützlich. Bei Schriften verwende ich persönlich sehr gerne rem. Bei Abständen, Breiten und Höhen px, % und vw/vh, je nach Fall
@@ProgrammierenMario ok, also hast Du Dir auch % extentions erzeugt?
Tailwind hat ja diese standardmäßig nicht drin, finde ich eigentlich schade.
Eine Frage noch :-) Kann man die Breakpoints nicht auf eigene Klassen anwenden?
Ich habe eine Klasse, in der ich eine div mit einer entsprechenden Breite versehe.
Dann habe ich einen build erzeugt, aber mit bspw. 2xl:MyClass (oder andere Auflösungen) funktioniert es nicht.
MyClass alleine funktioniert top.
Nein von vornherein funktioniert dies nicht. Alle Varianten müssten ebenfalls erst definiert werden wenn diese auf eigene Klassen funktionieren sollen. 🤷♂️
@@ProgrammierenMario ok, und wie definiere ich diese?
Muss man dann Klassen anlegen wie xl:myclass? Aber wie wird dann die Auflösung erkannt? Oder muss man irgendwie die breakpoints zuweisen?
Dachte das wäre ne schöne Sache, dann so könnte man sich einzelne Klassen für die entsprechende Auflösung erstellen.
…. Sonst müsste man ja doch wieder je nachdem sehr viele Standard Klassen hintereinander schreiben.
Oder gibts vielleicht hat so etwas:
xl:(klasse1 klasse2 klasse3) lg:(klasse4 klasse5 klasse6) ???
Ich empfehle dir mal die CSS Datei von Tailwind anzuschauen welche im dev Modus generiert wird. Da kann man sich einiges abschauen. Vielen Dank für deine Fragen. Diese geben mir viel Input und Ideen über die Inhalte meiner nächsten Tailwind Videos 🙂
@@ProgrammierenMario muss ich die Klasse dann so anlegen:
.xl\:myclass{
position: relative;
}
oder so:
@media (min-width: 1024px) {
.xl\:myclass{
max-width: 1024px;
}
}
Hast Du ne Idee, warum der Build bei mir zwischen 2 und 4 Minuten Dauert?
Bei dir ja nur 10s.
Uff, das ist ja echt ewig. Die 10s sind mir schon zu lange xD
Eine konkrete Idee habe ich nicht. Wie viele Dateien hast du denn die Tailwind auf alle verwendeten Klassen prüft, bzw. was hast du in der config bei purge stehen?
@@ProgrammierenMario habe nur 2 html dokument, wobei eine nur die "Home" ist und di ist leer.
sonst habe ich eben die 200 extend einträge mir den prozentangaben und den breakpoints.
Glaube aber, dass das vorher auch schon so lange gedauert hat.
Versuche mal in der config folgendes zu setzen:
// tailwind.config.js
module.exports = {
mode: 'jit',
// ... alles weitere
}
Der Just-In-Time Modus erstellt nur die Klassen die du auch verwendest und es sollte wesentlich schneller sein. Wichtig dabei ist das du bei purge drin stehen hast welche Dateien der durchsuchen soll.
Dieser Modus ist NEU und noch in preview. Es könnten sich also noch paar Sachen ändern oder Bugs enthalten sein. Bitte nicht produktiv verwenden. ;)
@@ProgrammierenMario werde ich mal versuchen, aber habe ich dann nach dem Build nicht das Problem, dass das was ich vorher nicht verwendet habe nicht zur Verfügung steht?
@@ProgrammierenMario Ergebnis sieht so aus:
npx: Installierte 134 in 65.066s
warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
Done in 741ms.
da wo jetzt die 741ms steht, da standen sonst ca. 140s
Danke für deine tollen Videos. Sollen wir mal zusammen was hier auf YT machen? Das wäre mir eine Ehre und Freude ;)
Vielen Dank 🙏
Hast du da etwas konkretes im Sinn?
Vor dem Anschauen:
Ok, 45 Minuten. Ich nehme Dich beim Wort. Hast Du mich belogen, ist das Abo weg! Und komm nicht hinterher und sag dass es an mir lag. Dein Titel ist da sehr eindeutig und stellt keinerlei Bedingung fuer den Lernerfolg.
Nach dem Anschauen:
Abo weg!
Ich danke dir!