Come sviluppare un Blog performante con Qwik e Supbase

In questo articolo ci occuperemo di aggiungere Tailwindcss al progetto e configurare i fonts che andremo ad utilizzare creando il primo componente Qwik.

Topics

1. Introduzione al Framework Tailwindcss
2. Installazione Tailwindcss
3. Aggiunta fonts
4. Conclusione

1. Introduzione al Framework Tailwindcss

Tailwindcss è un framework CSS utility-first ed aiuta a velocizzare lo sviluppo sia di prototipi che di applicazioni web.

Grazie al quantitativo elevato di classi che Tailwindcss contiene dovremo scrivere pochissimo css ed avremo modo di concentrarci maggiormente nello sviluppo delle logiche del nostro blog.

L’unico svantaggio di Tailwind è il fatto che, per componenti complessi, potrebbe risultare poco leggibile per via del quantitativo elevato di classi però è un ottimo compromesso perché comunque riduce notevolmente i tempi di sviluppo.

2. Installazione Tailwindcss

L’installazione di Tailwindcss su Qwik è molto semplice perché si occuperà Qwik della generazione dei file necessari. Per installarlo eseguiamo, all’interno della directory app, il comando pnpm qwik add tailwind. Eseguito il comando ci verranno mostrate le modifiche che verranno fatte e possiamo decidere se procedere o meno. In questo caso procediamo selezionando Yes looks good, finish update! in modo da far installare le dipendenze necessarie e generare i files.

Dei file generati l’unica modifica che facciamo è modificare il file tsconfig.json in modo da includere i file generati per cui avremo l’include: "include": ["src", "./*.d.ts", "./*.config.ts", "postcss.config.cjs", "tailwind.config.js"].

tailwind.config.js E’ il file di configurazione principale di Tawilwind in cui possiamo definire delle classi custom o modificare quelle esistenti.

Per maggiori informazioni sulla configurazione di Tailwind puoi consultare la guida ufficiale Configurazione Tailwindcss.

3. Aggiunta fonts

Andremo ora ad aggiungere due tipologie di fonts:

• Pokemon Font: Font che utilizzeremo per i titoli e che configuriamo localmente
• Inconsolata: Font che utilizzeremo per i testi

Ovviamente sei libero di scegliere i fonts che preferisci 😉.

Aggiungiamo il font Google che puoi trovare qua. Io utilizzerò il font Inconsolata ed il font Pokemon che trovi qua

Nel file router-head.tsx aggiungiamo i fonts:

...

const RouterHead = component$(() => {
  const head = useDocumentHead();
  const loc = useLocation();

  return (
    <>
      ...

      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link
        rel="preconnect"
        href="https://fonts.gstatic.com"
        crossOrigin="anonymous"
      />
      <link
        rel="preload"
        as="style"
        href="https://fonts.googleapis.com/css2family=Inconsolata:wght@400;700;900&display=swap"
      />
      <link
        href="https://fonts.googleapis.com/css2family=Inconsolata:wght@400;700;900&display=swap"
        rel="stylesheet"
      />
      <link
        href="https://fonts.cdnfonts.com/css/pokemon-solid"
        rel="stylesheet"
      />
    </>
  );
});

export default RouterHead;
router-head.tsx

Aggiungiamo i fonts nella configurazione di Tailwind:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
	theme: {
	  extend: {
		fontFamily: {
		  pokemon: "'Pokemon Solid', sans-serif",
		  inconsolata: "'Inconsolata', sans-serif",
		},
		fontSize: {
		  "pokemon-small": "4rem",
		  "pokemon-normal": "6rem",
		  "pokemon-big": "8rem",
		},
	  },
	},
	plugins: [],
};
tailwind.config.js

In questo modo l’intellisense ci suggerirà font-pokemon e font-inconsolata quando digitiamo font e text-pokemon-* quando digitiamo text.

Ora occupiamoci della creazione del nostro primo componente con Qwik 😊. Il primo componente è un atomo e ci servirà per renderizzare correttamente il font Pokemon.

import type { LenientSVGProps } from "@builder.io/qwik";
import { component$ } from "@builder.io/qwik";

type Props = {
  text: string;
  length?: number;
} & LenientSVGProps<SVGSVGElement>;

const PokemonText = component$<Props>(({ text, length = 650, ...props }) => {
  return (
	<svg
	  {...props}
		xmlns="http://www.w3.org/2000/svg"
		style={{ width: "inherit" }}
		class={[
		  "text-pokemon-normal h-full fill-yellow-500 stroke-blue-900 stroke-2 font-pokemon",
		  `${props.class}`,
		]}
	  >
		<text
		  x="50%"
		  y="50%"
		  textLength={length}
		  lengthAdjust="spacing"
		  class="text-yellow-600"
		  alignment-baseline="middle"
		  text-anchor="middle"
		>
		  {text}
		</text>
	  </svg>
	);
});

export default PokemonText;
atoms/pokemon-text/pokemon-text.tsx

Analizziamo il componente. Abbiamo creato un componente SVG in modo tale da poter modificare lo stile del testo aggiungendo i bordi (stroke) e rendere il testo quanto più simile all’originale.

Nelle Props passiamo come campo obbligatorio il text che sarà il testo che verrà renderizzato e la length che sta ad indicare la lunghezza del testo.

La funzione component$ restituisce un elemento JSX ed è la funzione di Qwik per ottimizzare i componenti suddividendoli in chunks che vengono caricati solamente all’occorrenza. Puoi avere maggiori informazioni nelle docs ufficiali.

Infine l’elemento che restituiamo è un SVG contenente il testo da renderizzare.

Per tutti i componenti che andremo a creare aggiungiamo, nella cartella del componente, un file index.ts contenente export { default as PokemonText } from "./pokemon-text"; ed un index.ts nella root della cartella atoms che esporta tutti gli atomi che definiremo export * from "./pokemon-text";.

Siamo pronti per verificare che il componente funzioni correttamente. Modifichiamo il file della home page:

import { component$ } from "@builder.io/qwik";
import { PokemonText } from "~/components";

export default component$(() => {

  return (
	<div class="flex w-full justify-center">
	  <PokemonText text="PokemAll" length={420}  />
	</div>
  );
});
routes/index.tsx

Lanciamo l’applicazione e dovremo la nostra scritta simile a quella dei Pokemon.

4. Conclusioni

In questo articolo abbiamo visto come configurare Tailwind in un’applicazione Qwik, abbiamo creato il nostro primo componente e integrato i fonts che utilizzeremo nel nostro blog . Nel prossimo articolo creeremo il layout comune a tutte le pagine con header, footer e content.

04. Qwik e Tailwindcss 👈

05. Creazione layout principale | In Arrivo