Auswahl des richtigen CSS -Frameworks ist ein wichtiger Bestandteil der neuen Projektentwicklung. Frameworks wie Bootstrap und Foundation sind beliebt für ihre voreingestellten Komponenten, die Entwickler problemlos beginnen k?nnen. Diese Methode eignet sich für einfache Websites mit einem vielseitigeren Erscheinungsbild und Gefühl. Für komplexere und personalisierte Websites treten jedoch Probleme auf.

Wenn das Projekt fortschreitet, müssen wir Komponenten anpassen, neue Komponenten erstellen und sicherstellen, dass die endgültige Codebasis einheitlich und nach der ?nderung leicht zu pflegen bleibt.

Die oben genannten Bedürfnisse sind schwer mit Frameworks wie Bootstrap und Foundation zu erfüllen, da diese Frameworks viele Stile mit sich bringen, die subjektiv und in vielen F?llen unerwünscht sind. Infolgedessen müssen wir weiterhin Spezifit?tsprobleme l?sen, w?hrend wir versuchen, den Standardstil zu überschreiben. Das klingt nicht einfach.

On-Shelf-L?sungen sind einfach zu implementieren, aber es fehlen Flexibilit?t und sind durch bestimmte Grenzen begrenzt. Auf der anderen Seite ist das Entwerfen einer Website ohne CSS -Framework nicht einfach zu verwalten und zu warten. Also, was ist die L?sung?

Die L?sung folgt wie immer dem goldenen Mittelwert. Wir müssen das richtige Gleichgewicht zwischen Beton und Abstrakten finden und anwenden. Low-Level-CSS-Frameworks bieten dieses Gleichgewicht. Es gibt viele solcher Frameworks, und in diesem Tutorial werden wir die beliebtesten untersuchen: Rückenwind -CSS.

Schlüsselpunkte

• Tailwind CSS nimmt einen praktisch bevorzugten Ansatz an, der eine direktere Kontrolle und Anpassung von Webkomponenten in HTML erm?glicht und damit eine überschaubare und skalierbare Codebasis erleichtert.
• Die Installation und das Einrichten von Tailwind -CSS sind sehr einfach, einschlie?lich der NPM -Installation, der Konfiguration über tailwind.config.js und mit dem Befehl @tailwind, um Stile einzuschlie?en.
• Tailwind CSS unterstützt reaktionsschnelles Design durch mobile Utility-Klassen, die unter Verwendung von Haltepunktpr?fixen bedingt angewendet werden k?nnen, um reaktionsschnelle Websites einfach zu erstellen.
• Das Framework f?rdert die Extraktion gemeinsamer Muster in wiederverwendbare Komponenten, reduziert die Redundanz und die Verbesserung der Effizienz des Stildesigns.
Die leistungsstarke Anpassung von Tailwind erm?glicht es Entwicklern, das Framework mit ihren eigenen CSS-Klassen und -Vertr?gen zu erweitern und Standardthemen an die projektspezifischen Anforderungen anzupassen.
Von kleinen pers?nlichen Blogs bis zu gro?en Unternehmensanwendungen ist Tailwind CSS geeignet, da es flexibel und leicht zu warten ist.

Was ist Rückenwind?

Tailwind ist nicht nur ein CSS -Framework, sondern auch ein Motor zum Erstellen von Designsystemen. ——

offizielle Wedwind Offizielle Website

Tailwind ist eine Sammlung von Dienstprogrammklassen auf niedriger Ebene. Sie k?nnen verwendet werden, um alle Art von Komponenten genau wie Lego -Steine ??zu bauen. Diese Sammlung deckt die wichtigsten CSS -Eigenschaften ab, kann jedoch auf verschiedene Weise leicht erweitert werden. Mit Rückenwind ist die Anpassung kein Problem mehr. Das Framework verfügt über eine hervorragende Dokumentation, beschreibt jedes Dienstprogramm der Klasse und demonstriert seine benutzerdefinierten Methoden. Alle modernen Browser und IE11 unterstützen es.

Warum ein praktisches Priorit?ts -Framework verwenden?

Das CSS-Framework der praktischen Priorit?t auf niedriger Ebene wie Tailwind hat viele Vorteile. Lassen Sie uns einige der bemerkenswertesten untersuchen:

• Sie k?nnen eine bessere Kontrolle über das Erscheinungsbild des Elements haben. Mit Versorgungsklassen k?nnen wir das Erscheinungsbild von Elementen leichter ?ndern und feinstimmen.
• Einfach zu verwalten und in gro?en Projekten zu verwalten, da Sie nur HTML -Dateien verwalten müssen, nicht in gro?en CSS -Code -Basen.
• Es ist einfacher, einzigartige, benutzerdefinierte Website -Designs zu erstellen, ohne unerwünschte Stile zu bek?mpfen.
• Es ist sehr anpassbar und skalierbar, was uns unbegrenzte Flexibilit?t ergibt.
• Es wird einen mobilen Ansatz angewendet und erleichtert die Implementierung reaktionsschneller Designmuster.
• Sie k?nnen gemeinsame, sich wiederholende Muster in benutzerdefinierte wiederverwendbare Komponenten extrahieren - in den meisten F?llen müssen Sie keine Zeile von benutzerdefinierten CSS schreiben.
• Es hat eine selbstinterpretierte Klasse. Wir k?nnen uns das Erscheinungsbild des Styling -Elements vorstellen, indem wir einfach den Klassennamen lesen.

Schlie?lich, wie der Sch?pfer von Rückenwind sagte:

Als ich es zum ersten Mal sah, war es fast unm?glich zu glauben, dass es eine gute Idee war - man muss es tats?chlich versuchen.

Also, lass es uns versuchen!

Anf?nger von Rückenwind

Um die Anpassung von Rückenwind zu demonstrieren, müssen wir sie über NPM installieren:

npm install tailwindcss

Der n?chste Schritt besteht darin, eine styles.css -Datei zu erstellen, mit der wir die @tailwind -Richtlinie verwenden, um den Rahmenstil einzuschlie?en:

@tailwind base;

@tailwind components;

@tailwind utilities;

führen wir den Befehl npx tailwind init aus, der eine minimale tailwind.config.js -Datei erstellt, in der wir w?hrend der Entwicklung benutzerdefinierte Optionen einstellen. Die generierte Datei enth?lt den folgenden Inhalt:

module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}

Der n?chste Schritt besteht darin, die Stile zu erstellen, damit sie verwendet werden k?nnen:

npx tailwind build styles.css -o output.css

Schlie?lich verknüpfen wir die generierte output.css Datei und eine Schriftart fantastisch mit unserem HTML:

<link rel="stylesheet" type="text/css" href="output.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">

Jetzt sind wir bereit zu erstellen.

(Die detaillierten Schritte zum Erstellen einer einseitigen Website-Vorlage werden hier weggelassen, da die L?nge zu lang ist, die Bilder und Schlüsselcode-Snippets jedoch beibehalten werden)

Zusammenfassung

Wie Sie sehen k?nnen, bietet Tailwind einen einfachen Prozess, ohne Optionen oder Flexibilit?t einzuschr?nken. Die von Tailwind bereitgestellte praktische Priorit?tsmethode wurde erfolgreich auf gro?e Unternehmen wie Github, Heroku, Kickstarter, Twitch, Segment usw. angewendet.

pers?nlich, nach vielen Stunden "Kampf" und "Kampf" mit den Stile von Frameworks wie Bootstrap, Foundation, Semantic UI, Uikit und Bulma, die das Heckwind -Dienstprogramm verwendet .

(Der FAQS -Abschnitt wird hier weggelassen, da es zu lang ist, aber ein überblick über die Hauptfragen und Antworten wird beibehalten) Der FAQS -Abschnitt deckt die Einzigartigkeit von Rückenwind -CSS, den Ansatz zum Einstieg ab, erste und andere Frameworks-Kompatibilit?t, reaktionsschnelles Design, gro? angelegte Projektanwendbarkeit, Themenanpassung, Vorprozessorunterstützung, Produktionsumgebungsoptimierung, E-Mail-Design und Lernressourcen.

Diese überarbeitete Ausgabe beh?lt die Original -Bildpositionen und -formate bei und paraphrasieren Sie den Text erheblich, um das Erstellen der Website -Vorlage zu erreichen, um die Ausgangsl?nge zu verringern und die Kernkonzepte beizubehalten. auch zusammengefasst.

Das obige ist der detaillierte Inhalt vonSo bauen Sie einzigartige, sch?ne Websites mit Rückenwind -CSS auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!