Tailwind CSS: creeu llocs web moderns ràpidament sense deixar el vostre HTML

Creeu dissenys complexos amb facilitat

Amb Tailwind CSS, crear dissenys complexos es converteix en una brisa. La combinació de classes d'utilitat i utilitats de disseny responsiu us permet dissenyar dissenys complexos amb facilitat, sense comprometre el rendiment i el manteniment del vostre lloc web.

Construeix qualsevol cosa

La bellesa de Tailwind CSS rau en la seva versatilitat. Podeu crear qualsevol cosa, des d'una simple pàgina de bloc fins a una plataforma de comerç electrònic avançada, tot fent servir les mateixes classes d'utilitat intuïtives.

Només estàs limitat per la teva imaginació. La principal diferència amb l'ús de Vanilla CSS és la velocitat amb què podeu crear dissenys personalitzats.

L'enfocament tradicional d'utilitzar classes css personalitzades amb components html com div, div class, p class és sempre una opció, però la millora de velocitat que inclou Tailwind CSS et facilita la vida.

Les bones pràctiques en realitat no funcionen

Tradicionalment, CSS s'escriu establint un conjunt d'estils globals i perfeccionant-los component per component. Tot i que aquest és un mètode popular, pot provocar un codi voluminós i difícil de mantenir.

Tailwind CSS desafia aquesta noció, argumentant que el CSS de la utilitat ofereix una solució més neta i més fàcil de mantenir.

La biblioteca de components més popular per a Tailwind CSS

daisyUI és la biblioteca de components més popular per a Tailwind CSS, amb més de 50 components predissenyats, més de 500 classes d'utilitat i possibilitats pràcticament infinites. Us estalvia de reinventar la roda cada vegada que creeu un nou projecte.

No tornis a inventar la roda cada vegada

En lloc de perdre el temps amb el tediós procés d'escriure dotzenes de noms de classe per a cada projecte nou, Tailwind CSS us permet utilitzar un conjunt semàntic i ben definit de classes d'utilitat.

Aquestes classes són reutilitzables i funcionen harmònicament amb la cascada CSS, proporcionant-vos una base sòlida per a tots els vostres projectes.

Tailwind CSS: un marc CSS d'utilitat primer

En el seu nucli, Tailwind CSS és un marc CSS de primera utilitat. Això vol dir que ofereix classes d'utilitat componibles de baix nivell que podeu utilitzar per crear qualsevol disseny, directament al vostre HTML. No més fitxers CSS interminables, només codi senzill i intuïtiu.

Utilitzeu noms de classe semàntics

Els noms de classe semàntics milloren la llegibilitat del vostre codi, facilitant la comprensió del que fa una classe específica només mirant-ne el nom. Aquesta és una de les moltes funcions que Tailwind CSS ha adoptat per millorar l'experiència del desenvolupador.

CSS pur. Marc agnòstic. Funciona a tot arreu

Tailwind CSS no us vincula a cap marc específic. És simplement CSS pur, de manera que podeu utilitzar-lo amb qualsevol marc, o fins i tot sense cap marc. Funciona a tot arreu on CSS funciona.

Beneficis de Tailwind CSS

Els avantatges d'utilitzar Tailwind CSS inclouen una major productivitat, una mida reduïda del fitxer CSS i una experiència de desenvolupador millorada gràcies a la metodologia de la utilitat. A més, el mode Just-In-Time (JIT) proporciona temps de construcció ràpids com la llum, accelerant encara més el procés de desenvolupament.

Preus CSS de Tailwind

Tailwind CSS és un projecte de codi obert, el que significa que és completament gratuït. El cost arriba quan voleu accedir a funcions premium, com ara components i plantilles de la interfície d'usuari, que s'ofereixen mitjançant la interfície d'usuari de Tailwind.

És opinió i flexible alhora

Tailwind CSS ofereix una opinió ferma sobre com estructurar el vostre CSS, però és prou flexible per permetre la personalització. Aquest equilibri us permet centrar-vos en allò que més importa: crear interfícies d'usuari boniques.

Característiques modernes

Tailwind CSS inclou funcions modernes com Flexbox, Grid i propietats personalitzades, cosa que la converteix en una opció excel·lent per desenvolupar aplicacions web modernes.

Requisits previs per utilitzar Tailwind CSS

Abans de començar a utilitzar Tailwind CSS, necessiteu una comprensió bàsica d'HTML i CSS.

Quan utilitzar Tailwind CSS

Tailwind CSS és adequat per a tot tipus de projectes web, grans o petits. Si estàs cansat de lluitar amb CSS i busques una solució més eficient i fàcil de desenvolupar, llavors Tailwind CSS és per a tu.

No en marcs de components?

Si no sou un fanàtic dels frameworks de components com React o Vue, no us preocupeu. Tailwind CSS és independent del marc i es pot utilitzar amb HTML i JavaScript purs.

Similituds i diferències entre Tailwind CSS i altres marcs CSS

Mentre que altres marcs com Bootstrap i Foundation ofereixen components predissenyats, Tailwind CSS us ofereix les eines per crear dissenys completament personalitzats sense deixar el vostre HTML. Tanmateix, amb la integració de biblioteques de components com daisyUI, ara podeu gaudir del millor dels dos mons.

Mode fosc

Una de les últimes característiques de Tailwind CSS i daisyUI és el mode fosc, que us permet crear llocs web de temàtica fosca sense esforç.

Exemple de Flexbox

Tailwind CSS s'integra bé amb les funcions CSS modernes com Flexbox. Per exemple, podeu crear un disseny responsiu utilitzant classes com flex, justify-center, elements-center, etc.

Amb la combinació de Just-in-Time, podeu provar fàcilment diferents valors de classe d'utilitat. Si una classe d'utilitat no va funcionar, simplement canvieu-la per personalitzar el vostre element.

Un exemple de disseny de Flexbox

Amb Tailwind CSS, és fàcil crear dissenys complexos com una barra de navegació sensible. Aquí teniu un exemple:

<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
  <div class="flex items-center flex-shrink-0 text-white mr-6">
    <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
  </div>
  <div class="block lg:hidden">
    <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
      <svg class="fill-current h-3 w-3" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"></path></svg>
    </button>
  </div>
  <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
    <div class="text-sm lg:flex-grow">
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">Home</a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">About</a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">Contact</a>
    </div>
  </div>
</nav>

Components ja fets

Si vau decidir utilitzar el codi css de tailwind al vostre projecte, podreu trobar molts components prefabricats en línia. Podeu copiar qualsevol d'aquests i personalitzar-los per al vostre propi lloc web.

Com convertir CSS a Tailwind CSS

Ser capaç de convertir CSS en classes CSS de Tailwind és una cosa que necessiten la majoria dels desenvolupadors. Hi ha molts llocs web a Internet construïts abans que existís Tailwind CSS. Aquestes pàgines web utilitzen CSS amb fulls d'estil i els professionals del desenvolupament web volen migrar aquestes pàgines a Tailwind CSS.

DivMagic és una eina de desenvolupament web creada per a desenvolupadors web i programaris. Permet copiar qualsevol estil de vanilla css a Tailwind CSS. Amb un sol clic, podeu convertir qualsevol component d'Internet a Tailwind CSS i utilitzar Tailwind al vostre projecte i personalitzar l'estil de la manera que vulgueu.

Submergeix-te en la filosofia CSS de Tailwind

La filosofia darrere de Tailwind CSS és centrar-se en la utilitat. Això vol dir que en lloc de predefinir les classes de components, Tailwind CSS ofereix classes d'utilitat de baix nivell que us permeten construir dissenys únics sense deixar el vostre HTML.

Per què allunyar-se del CSS tradicional?

El CSS tradicional pot provocar un ús excessiu de substitucions, fitxers inflats i "sopa div". Si canvieu a un marc CSS de primera utilitat com Tailwind CSS, podeu alleujar aquests problemes, donant lloc a una base de codi més neta i simplificada.

Experimenta el poder de les classes d'utilitat

Les classes d'utilitat us ajuden a evitar repetir els mateixos estils als vostres fulls d'estil. És un principi de "No et repeteixis" (DRY). Aquestes classes us estalvien temps i esforços significatius i donen lloc a una base de codi altament mantenible.

Explorant les directrius CSS de Tailwind

Tailwind CSS introdueix unes quantes directives que es poden utilitzar dins dels vostres fulls d'estil. Aquests inclouen @apply , @variants i @screen. Entendre i utilitzar aquestes directives pot millorar molt la vostra experiència CSS de Tailwind. Es poden col·locar al fitxer CSS de Tailwind Config. Podeu escriure classes CSS utilitzant aquest enfocament.

Amplieu Tailwind CSS amb connectors

Tailwind CSS es pot ampliar amb complements, afegint noves funcionalitats o personalitzant l'existent. Apreneu a aprofitar els connectors per maximitzar l'eficiència i l'estètica dels vostres projectes web.

Incorporeu Tailwind CSS al vostre flux de treball

Integrar Tailwind CSS al vostre flux de treball de desenvolupament és senzill, tant si utilitzeu eines de creació com Webpack o Parcel, com si treballeu amb marcs com Next.js o Gatsby.

Millora l'accessibilitat amb Tailwind CSS

Tailwind CSS fomenta el disseny accessible mitjançant la inclusió d'una sèrie d'atributs ARIA a les seves classes. Creeu interfícies més accessibles i milloreu l'experiència d'usuari per a tothom.

Aprofiteu el poder de Flexbox i Grid amb Tailwind CSS

Aprofiteu els mòduls de disseny CSS moderns com Flexbox i Grid amb Tailwind CSS. Descobriu com es poden utilitzar les classes d'utilitat per controlar el disseny d'una manera flexible i sensible.

Com depurar els vostres projectes CSS Tailwind

Tailwind CSS ofereix diverses eines i tècniques de depuració que faciliten la identificació i la resolució de problemes d'estil. Comprèn aquestes eines i millora les teves habilitats de depuració.

Creeu una web acolorida amb Tailwind CSS

Tailwind CSS inclou una àmplia paleta de colors personalitzables. Apreneu a utilitzar i personalitzar aquests colors per crear dissenys vibrants i visualment atractius.

Desenvolupa més ràpid amb el mode JIT de Tailwind CSS

Aprofundeix en el mode Just-In-Time de Tailwind CSS. Comprèn com funciona i com pot accelerar significativament el teu desenvolupament i temps de construcció.

De zero a heroi: Master Tailwind CSS

Embarca't en un viatge per dominar Tailwind CSS. Des de la configuració del vostre entorn fins a l'exploració de temes avançats, aquesta guia completa us cobreix.

Personalitzeu Tailwind CSS segons les vostres necessitats

Un dels majors punts forts de Tailwind CSS és la seva flexibilitat. Apreneu a personalitzar Tailwind per adaptar-se a les necessitats específiques del vostre projecte.

Comprendre amb Tailwind CSS

Participa en l'aprenentatge pràctic mitjançant una sèrie d'exemples pràctics. Exploreu com crear una varietat de components web amb Tailwind CSS i DaisyUI.

Migració d'altres marcs CSS a Tailwind CSS

Teniu en compte canviar a Tailwind CSS? Compreneu les diferències clau entre Tailwind i altres frameworks i apreneu estratègies efectives per migrar els vostres projectes.

Podeu utilitzar DivMagic o eines similars per augmentar significativament la vostra velocitat de migració.

Les eines de desenvolupament web com DivMagic us permeten copiar qualsevol element, qualsevol disseny i qualsevol estil de qualsevol lloc web amb un sol clic.

Un exemple senzill: construir un component de targeta responsive

Aquí teniu un exemple de com podeu crear un component de targeta responsiu amb Tailwind CSS. Aquest component contindrà una imatge, un títol i una descripció.

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="/img/store.jpg" alt="Store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Your Product</div>
      <p class="mt-2 text-gray-500">This is a brief description of your product. The card uses utility classes for padding, text color, and the uppercase font styling.</p>
    </div>
  </div>
</div>

Creació d'un formulari amb Tailwind CSS

Crear un formulari amb Tailwind CSS és senzill i intuïtiu. Aquí teniu un formulari de contacte senzill:

<div class="w-full max-w-xs">
  <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
    <div class="mb-4">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
        Username
      </label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
    </div>
    <div class="mb-6">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
        Password
      </label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
    </div>
    <div class="flex items-center justify-between">
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
        Sign In
      </button>
    </div>
  </form>
</div>

Personalització de Tailwind CSS

Tailwind CSS us permet personalitzar la seva configuració predeterminada, adaptant les classes d'utilitat a les vostres necessitats. A continuació hi ha un exemple de com personalitzar la paleta de colors.

Aquests exemples mostren la flexibilitat i la simplicitat de Tailwind CSS, demostrant com us poden ajudar a crear components web moderns i sensibles de manera eficient i eficaç.

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#243c5a',
        'custom-green': '#387c6d',
      }
    }
  }
}

Necessitaré algun fitxer CSS?

L'únic fitxer que necessiteu amb Tailwind CSS és el fitxer tailwind.config.js.

Aquest fitxer conté la vostra configuració de configuració. No estaràs escrivint css ni tindreu cap altre fitxer css. Aquest fitxer de configuració és l'únic que necessitareu.

Quines són les millors pràctiques per a Tailwind CSS?

Per obtenir una explicació detallada sobre les millors pràctiques de Tailwind CSS, consulteu el nostre altre article Tailwind CSS Best Practices.

Tailwind CSS: el futur del disseny web

Reflexioneu sobre com Tailwind CSS està configurant el futur del disseny web. Conegui la seva influència i potencial de creixement en la indústria del desenvolupament web.