Van nul tot honderd: het bouwen van een moderne, responsieve webinterface met Tailwind CSS

In moderne front-endontwikkeling is het nastreven van efficiënte, consistente en onderhoudbare stijloplossingen een belangrijk vereiste voor ontwikkelaars. De traditionele manier van CSS-schrijven leidt vaak tot een opgeblazen stijlbestand, willekeurige definiën van klassennamen en problemen met globale stijlen. Praktische CSS-frames bieden hier een oplossing.Tailwind CSSDoor een reeks praktische, lage-niveaus-klassen te bieden, kunnen ontwikkelaars snel en direct elke gewenste design in HTML bouwen, terwijl ze de stijlcontrole en onderhoudbaarheid behouden. Het gaat niet om vooraf gedefinieerde componenten, maar om een set hulpmiddelen voor het bouwen van custom designs, waardoor er een uitstekende balans wordt gevonden tussen flexibiliteit en ontwikkelings snelheid. In dit artikel wordt je stap voor stap geleid hoe je dit kunt doen.Tailwind CSSEen moderne, responsieve webinterface bouwen.

Omgeving opzetten en project initialiseren

Ga aan de slagTailwind CSSHet eerste stap is om het te integreren in je project. De meest aanbevolen manier is om dit te doen met de officiële CLI-tool of door het te combineren met bestaande bouwketten (zoals Vite of Webpack).

Snel installeren met NPM en CLI

Voor de meeste projecten is het efficiëntst om de nodige pakketten te installeren en het project in te stellen met npm. Eerst moet je in het hoofddirectory van het project de volgende commando in de terminal uitvoeren om de pakketten te installeren.Tailwind CSSEn de afhankelijkheden daarvan.

Aanbevolen leesmateriaal De ultieme gids voor Tailwind CSS: van beginner tot expert, voor het bouwen van moderne websites.。

npm install -D tailwindcss
npx tailwindcss init

Uitvoerennpx tailwindcss initDe commando zal een bestand genereren met de naamtailwind.config.jsDit is de configuratiebestand. Hiermee wordt de controle uitgevoerd.TailwindHet kernbestand voor het gedrag: hier kun je thema's, plugins en, het belangrijkste, specificaties bepalen.TailwindWelke bestanden moeten worden gescand om de stijl te genereren?

De websitebouwer van WordPress.com

99.999% beschikbaarheid + disaster recovery tussen regio's, 24-uurs ondersteuning, gratis gebruik van A.I. bij het bouwen van websites bij aankoop van een blogpakket.

Gratis domeinnaam voor één jaar

Ga naar de website van WordPress.com voor hulp bij het bouwen van een website →

De websitebouwassistent van UltaHost.

Meer dan 900 gratis, aanpasbare sjablonen met de SEO-functionaliteit die nodig is om de zichtbaarheid van websites in zoekmachines te optimaliseren.

Aanbieding 40%

Ga naar de website van UltaHost voor hulp bij het bouwen van een website →

Het pad naar het configuratiebestand van de template.

Volgens de opgave moet het vervolgens worden bewerkt.tailwind.config.jsDe bestanden, in...contentIn de eigenschappen moet de path naar het sjabloonbestand van je project worden opgegeven. Dit zorgt ervoor dat…TailwindDe compiler (JIT-engine) kan alle bestanden vinden waarin praktische klassen zijn gebruikt, en genereert alleen het corresponderende CSS.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Introduceer de basisstijlopdrachten.

Ten slotte: in je hoofdCSS-bestand (bijvoorbeeld…)src/styles.css或src/index.cssIn dit voorbeeld wordt gebruikgemaakt van@tailwindDe instructie om dit te bevatten is als volgt:TailwindAlle lagen van…

/* src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Nu kun je het uitvoeren.npx tailwindcss -i ./src/styles.css -o ./dist/output.css --watchBevelenTailwindHet zal dan beginnen met het bijhouden van veranderingen in je bronbestanden, en deze worden in real time vertaald naar CSS-bestanden die uiteindelijk worden gebruikt in de productieomgeving.

Core utility classes en layoutconstructie

Tailwind CSSHet kernpunt van dit product ligt in de grote en systeematische collectie van praktische klassen. De namen van deze klassen voldoen aan eenvoudige en logische namingconventies, waardoor het schrijven van stijlregels net zo eenvoudig is als het beschrijven van het uiterlijk van een element.

Aanbevolen leesmateriaal Praktische handleiding voor Tailwind CSS in het Chinees: van nul naar een moderne, responsieve UI。

Ruimte tussen elementen, opmaak en kleursysteem

TailwindEr wordt een standaardafstandsschaal gebaseerd op ‘rem’ aangeboden, samen met een compleet set opmaaktools.p-4Dit betekent dat de padding (de ruimte tussen de randen van een element en de inhoud ervan) 1 rem is.mt-2Dit betekent dat de bovenmarge (margin-top) is ingesteld op 0,5 rem. Voor tekst kun je dit gebruiken om de indeling van de tekst te bepalen.text-lgOm een grotere fontgrootte in te stellen, gebruikt u...font-boldOm het te versterken, moet je gebruikmaken van…text-gray-800Om donkergrijze tekst te instellen…

Het kleursysteem is bijzonder krachtig; elke kleur beschikt over een gradatie in de scherpteniveaus van 50 tot 900. Bijvoorbeeld…bg-blue-500De achtergrondkleur is een blauwe kleur van gemiddelde intensiteit.hover:bg-blue-600Dit betekent dat de kleur van de tekst verandert in een donkerdere blauwtoon wanneer de muis erover wordt gehouden.

Het gebruiken van Flexbox en Grid voor het opmaken van layouts

Het opstellen van een pagina-layout is…TailwindDe sterke punten van... Door...flex和gridMet gerelateerde klassen kunnen verschillende complexe lay-outs snel worden gecreëerd.

De Bluehost-websitebouwer

Het aanbieden van tools voor het maken van websites met A.I., 24/7 online chat- en telefonische ondersteuning, een gratis domeinnaam voor een jaar, gratis CDN en een uptime SLA van 99,991%

Bezoek Bluehost.

<div class="flex flex-col md:flex-row">
  <aside class="w-full md:w-1/4 p-6 bg-gray-100">
    <!-- 侧边栏内容 -->
  </aside>
  <main class="w-full md:w-3/4 p-6">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- 网格卡片内容 -->
      <div class="bg-white rounded-lg shadow p-4">Kaart 1</div>
      <div class="bg-white rounded-lg shadow p-4">Kaart 2</div>
      <div class="bg-white rounded-lg shadow p-4">Kaart 3</div>
    </div>
  </main>
</div>

In het bovenstaande voorbeeld hebben we een flexibele container gecreëerd die standaard verticaal is gerangschikt, maar op schermen van middelgrote afmeting horizontaal wordt weergegeven. Het hoofdinhoudsveld gebruikt CSS Grid; het aantal kolommen past zich aan de schermgrootte aan (1 kolom op kleine schermen, 2 kolommen op middelgrote schermen en 3 kolommen op grote schermen). Bovendien zijn er eenheidelijke afstanden tussen de verschillende elementen (cards) te zien.gap-6）。

Realiseren van responsief ontwerp en interactieve functies

Responsive design is de basis voor moderne webpagina's.Tailwind CSSDoor een mobiele-first-strategie te hanteren, zijn de responsieve functies eenvoudig te gebruiken en zeer krachtig.

Een breakpoint-systeem dat is gericht op mobiele gebruikers

TailwindEr zijn standaard vijf responsieve breakpoint-prefixen beschikbaar:sm、md、lg、xl、2xlDeze prefixen kunnen worden toegepast op bijna alle praktische klassen om stijlcontrole te realiseren voor verschillende schermgrootten. Stijlen zonder prefix zijn van toepassing op alle schermen, terwijl stijlen met een prefix alleen vanaf die specifieke schermgrootte worden weergegeven.

Aanbevolen leesmateriaal Master Tailwind CSS: Een praktische gids voor het ontwikkelen van componenten, van het begin tot de volle vertrouwdheid。

Als voorbeeld:text-center sm:text-leftDit betekent dat de tekst op kleine schermen en kleinere schermformaten in het midden wordt weergegeven.smAls de resolutie 640 px of hoger is, wordt de tekst links uitgelijnd.

Werken met toestanden als het overgaan in een hover-modus of wanneer de focus wordt geplaatst

TailwindMet de prefixen voor verschillende staatsoorten kun je eenvoudig stijlen ontwerpen voor de verschillende interactieve toestanden. Enkele veel voorkomende prefixen zijn:hover:、focus:、active:、disabled:etc.

hosting.com

Gratis SSL, Cloudflare CDN, WAF, 40+ wereldwijde datacenters om uit te kiezen, lagere latentie dankzij een locatie dichterbij, 24/7/365 serviceondersteuning. Je bespaart nu tot wel 671 TP4T, en ondersteuning voor A.I.-ontwikkeling en SEO-optimalisatie is inbegrepen.

Ga naar hosting.com.

<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50 transition duration-150 ease-in-out">
  点击我
</button>

De knop is in zijn standaardtoestand blauw. Als je de muis erover houdt, donkert de kleur van de knop af. Wanneer de knop de focus krijgt, verschijnt er een blauwe ringvormige omlijning. Alle kleurveranderingen worden vergezeld door een soepe, smooth animatie. Dit maakt het proces van het creeren van een gebruiksvriendelijke interactieve omgeving aanzienlijk eenvoudiger.

Custom configuraties en productieoptimalisaties

HoewelTailwindHet is direct gebruiksklaar, maar de echte kracht zit in de hoge mate van personalisatie. Met behulp van configuratiebestanden kun je het volledig aanpassen aan je merk- en designeisen.

Uitbreiden en overschrijven van onderwerpen

在tailwind.config.jsDe documenten vantheme.extendIn het object kun je nieuwe waarden toevoegen of de standaardthemainstellingen overschrijven, zoals kleuren, fonten, afstanden en dergelijke, zonder dat dit de rest van het systeem beïnvloedt.TailwindDe standaardwaarde.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#1d4ed8',
        'brand-secondary': '#7e22ce',
      },
      fontFamily: {
        'sans': ['"Inter"', 'system-ui', 'sans-serif'],
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

Op deze manier kun je het gebruiken in het project.bg-brand-primary或font-sansDat is een aangepaste klasse.

Ongebruikte stijlen verwijderen

Om te zorgen dat het uiteindelijke productpakket zo klein mogelijk is,TailwindDe JIT-engine (Just-In-Time compiler) werkt uiterst nauwkeurig volgens…contentDe CSS wordt generereerd op basis van de daadwerkelijke klassennamen in de configuratiebestanden. Je hoeft PurgeCSS niet handmatig uit te voeren. Tijdens het bouwen van de productieversie moet je alleen zorgen dat de juiste bouwcommando's worden gebruikt.TailwindEr wordt automatisch een CSS-bestand uitgegeven dat alleen de door u gebruikte klassen bevat en dat optimaal is geoptimaliseerd.

NODE_ENV=production npx tailwindcss -i ./src/styles.css -o ./dist/output.css --minify

Gebruik--minifySymbolen kunnen het uitgegeven CSS-bestand nog verder comprimeren.

Samenvatting

Tailwind CSSDe methode biedt een nieuwe, prioriteitsgerichte benadering voor het schrijven van CSS. Het elimineert de tijd die nodig is om heen en weer te switchen tussen HTML- en CSS-bestanden, zorgt voor een consistente stijl dankzij een strak ontwerpssysteem, en maakt het zeer efficiënt om moderne, adaptieve en interactieve interfaces te bouwen dankzij de krachtige mogelijkheden voor responsief ontwerp en state management. Van het opzetten van de omgeving, het gebruik van kernklassen, het ontwikkelen van responsieve designs tot het verder personaliseren en optimaliseren van de interfaces: dit alles wordt onder de knie gekregen met deze methode.Tailwind CSSDat betekent dat je over een sterke set tools beschikt om alle uitdagingen op het gebied van front-end-ontwerp aan te gaan. Hoewel het leren van de verschillende classnamen en hun gebruik enige moeite kan opleveren, zal de ontwikkelings snelheid en het onderhoud van je projecten een stuk verbeteren zodra je ermee vertrouwd bent.

Veelgestelde vragen (FAQ)

Zorgt Tailwind CSS ervoor dat de HTML-code te lang en onoverzichtelijk wordt?

Dit is een veel voorkomende zorg. Het is waar dat er in HTML veel klassennamen voorkomen, maar dit wordt meestal gezien als een compromis.Tailwind CSS将样式决策从CSS文件转移到了HTML模板中，这实际上提高了可读性，因为你一眼就能看出一个元素的外观。对于复杂的类列表，可以使用模板语法（如React的className、Vue的:class）进行组合和管理，或者提取为可复用的组件，从而保持模板的整洁。

Hoe kun je de Tailwind-stijlen van derde-party-componenten overschrijven?

Als je een bestand of functie wilt overschrijven die al is gebruikt...TailwindEr zijn verschillende manieren om de stijl van derde-party-componenten van een klasse aan te passen. De meest directe manier is om in je HTML-/template specifiekere klassenamen te gebruiken, waardoor de CSS-regels beter kunnen worden gericht op deze componenten. Een andere optie is om…!importantVariatie: voeg dit na de klassenaam toe.!importantAls voorbeeld:bg-red-500!Een nog betere optie is om…tailwind.config.jsOm de specificiteit van de CSS-stijlen voor bepaalde componenten te verhogen, of om de standaardstijlen te overschrijven, kan je de componenten ‘pakken’ (wrappen) en hierbij een aangepaste klassenaam doorgeven.

Welke JavaScript-frames werken goed samen met Tailwind CSS?

Tailwind CSSHet is onafhankelijk van het gebruikte framework en past perfect bij elke technologiestack die CSS en HTML ondersteunt. Op dit moment is er een uitstekende integratie en communityondersteuning voor populaire en meta-frames zoals React, Vue.js, Angular, Svelte, Next.js, Nuxt.js en Gatsby. Er zijn ook officiële plugins beschikbaar voor bepaalde frameworks (bijvoorbeeld Next.js) om de ontwikkelingservaring te optimaliseren.

Zullen zelfgemaakte stijlwaarden de uiteindelijke grootte van het CSS-bestand vergroten?

Het zal niet onbeperkt groter worden. Dankzij...Tailwind CSSDe Just-in-Time (JIT)-modus zorgt ervoor dat alleen de CSS-klassen die daadwerkelijk worden gebruikt in je projecttemplate worden gecreëerd en in het uiteindelijke CSS-bestand worden opgenomen. Ook al heb je in de configuratiebestanden veel aangepaste kleuren, afstanden of fonten gedefinieerd, worden deze alleen weergegeven als ze in je HTML worden verwezen.bg-my-custom-colorAls deze stijlen niet worden opgenomen in de broncode, zullen ze ook niet worden weergegeven in het uitgevoerde bestand.Tailwind CSSDe belangrijkste mechanisme om de grootte van de productiepakketten te houden op een zo laag mogelijk niveau, is…