4/7/2022 ∙ 8 minut czytania

banner

Osobista strona internetowa — stylowanie za pomocą Tailwind CSS 🎨

To będzie seria postów poświęconych tworzeniu tej strony. Przedstawię w niej po kolei wszystkie kroki wykonane podczas jej tworzenia.

Nie będę tutaj w żadnym wypadku bardziej oryginalny od innych twórców stron podobnych do mojej i do jej ostylowania użyję Tailwind CSS. Metodyka, jaką przyjęli twórcy tego framework'a jest genialna w swojej prostocie. Stawia ona przede wszystkim na użyteczność. Tailwind działa na podstawie pre-definiowanych klas CSS, które twórca może komponować w celu zbudowania designu, który chce osiągnąć, bezpośrednio w języku znaczników, którego używa. Tailwind wykrywa te klasy i dodaje je do CSS. Dzięki czemu, na naszej stronie produkcyjnej nigdy nie będzie nieużywanych CSS-ów.

Zalety Tailwind CSS

Instalacja Tailwind CSS w Remix

Dokumentacja Tailwind'a jest bardzo dobrze napisana, a proces instalacji jest dostosowany dla większości znanych framework'ów do tworzenia UI. W tej dokumentacji jest również wymieniony Remix. Przejdźmy więc do instrukcji instalacji.

Pierwszym krokiem będzie zainstalowanie Tailwind'a w katalogu projektu

npm install -D tailwindcss postcss autoprefixer concurrently
npx tailwindcss init -p

Zauważ, że wszystkie zależności instalujemy jako developerskie. Nie są to paczki, które będą dostarczane na wersje produkcyjna strony internetowej. Służą jedynie jako narzędzia pomocnicze, które zbudują CSS-y naszej strony.

Po wykonaniu polecenia

npx tailwindcss init -p

w katalogu naszego projektu pojawią się dwa nowe pliki:

Kolejnym krokiem będzie konfiguracja ścieżek do plików zawierających szablony stylowania w pliku tailwind.config.js

module.exports = {
  content: ['./app/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

"./app/**/*.{js,ts,jsx,tsx}", - wskazuje na wszystkie pliki w katalogu app z rozszerzeniem .{js,ts,jsx,tsx}.

Następnie musimy napisać skrypty, które zajmą się budowaniem CSS-ów dla naszej strony. Zarówno w trybie deweloperskim jak i produkcyjnym. Wejdźmy do pliku package.json:

{
  "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
    "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
    "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css"
  }
}

dzięki modyfikacji polecenia dev, mozemy uruchomić równolegle dwa polecenia, które również są zdefiniowane w pliku, czyli dev:css i remix dev.

polecenie tailwindcss używa flag -i oraz -o. Flaga -i definiuje wejście, a flaga -o wyjście (czyli gotowe CSS-y). Flaga -m to skrót od --minify, a -w to skrót od --watch. Obserwowanie polega na wykrywaniu zmian w szablonach i przebudowaniu CSS-ów wyjściowych. Minifikowanie usuwa niepotrzebne białe znaki, które znajdują się w CSS-ach, żeby jak najmniejsza porcja danych została przesłana do przeglądarki końcowego użytkownika.

W kolejnym kroku należy utworzyć plik wejściowy dla tailwinda, czyli plik pod ścieżką styles/app.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind to dyrektywa, dzięki której tailwind rozpoznaje każdą ze swoich warstw. O funkcjach i dyrektywach można więcej przeczytać tutaj.

W ostatnim kroku musimy zaimportować plik z kodem wynikowym tailwind'a. Plik nie został jeszcze wygenerowany, ale tym zajmiemy się za chwile. Żeby klasy tailwind'a były dostępne na każdej podstronie najlepiej zaimportować plik wyjściowy w pliku root.tsx:

import styles from './styles/app.css'

export function links() {
  return [{ rel: 'stylesheet', href: styles }]
}

Żeby sprawdzić, czy wszystko działa prawidłowo, należy uruchomić polecenie npm run dev które to wykona równolegle dwa polecenia:

Jeżeli wszystko będzie działać poprawnie, powinniśmy zauważyć nowe style na stronie. Plik app/styles/app.css zawiera kod CSS, który został wygenerowany przez narzędzie tailwindcss. Jest to kod oparty na paczce modern-normalize, której zadaniem jest normalizacja CSS-owych styli. Zauważ, że wygląd nagłówków, list, linków został zresetowany. To oczekiwane zachowanie. Teraz zajmiemy się poprawianiem wyglądu strony.

Wygląd strony głównej

Skupmy się na poprawie wyglądu strony głównej. W pliku app/routes/index.tsx znajduje się kod, który wyświetla tę stronę. Zmodyfikujmy ją tak, żeby nabrała nowego wyglądu.

import { Link } from '@remix-run/react'

export default function Index() {
  return (
    <main className="p-6">
      <h1 className="text-4xl">Blog</h1>
      <ul className="mt-4 leading-7">
        <li>
          <Link to={'/copywriter-tool-belt'}>Copywriter - my tool belt</Link>
        </li>
        <li>
          <Link to={'/remix-basics'}>Personal website - remix basics 💿</Link>
        </li>
        <li>
          <Link to={'/project-launch'}>Personal website - project launch</Link>
        </li>
        <li>
          <Link to={'/hello-world'}>Hello World!</Link>
        </li>
      </ul>
    </main>
  )
}

Na samym końcu pliku app/styles/app.css pojawiły się nowe klasy, które definiują ich zachowanie:

.mt-4 {
  margin-top: 1rem;
}

.list-item {
  display: list-item;
}

.p-6 {
  padding: 1.5rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.leading-7 {
  line-height: 1.75rem;
}

Wtyczka do tailwind'a

Skąd wiadomo jakiej klasy użyć i kiedy? Tutaj z pomocą przychodzi wtyczka do VSCode - Tailwind CSS IntelliSense. Wtyczka ta wykrywa użycie props'a className w plikach reaktowych oraz class w plikach HTML i kontekstowo podpowiada nam klasy, których możemy w danym miejscu użyć.

Zalecam instalacje wtyczki, zanim rozpoczniemy eksperymentowanie. Zaoszczędzi to dużo czasu przy czytaniu dokumentacji tailwind'a.

Wygląd artykułu — zmiana struktury katalogów

Tutaj sprawa nieco się komplikuje, bo musimy przenieść swoje artykuły do osobnego katalogu, żeby wprowadzić nowy układ dla każdego posta.

W tym celu stworzę nowy katalog app/routes/blog i do niego przeniosę wszystkie pliki Markdown. Dodatkowo utworzę nowy plik, który zdefiniuje układ dla każdego posta. Nie przejmuj się, zaraz wyjaśnię, o co tutaj właściwie chodzi. Struktura katalogów powinna wyglądać teraz tak:

.
├── blog
│   ├── copywriter-tool-belt.md
│   ├── hello-world.md
│   ├── project-launch.md
│   ├── remix-basics.md
│   └── tailwind-styling.md
├── blog.tsx
└── index.tsx

Wygląd artykułu — wtyczki Tailwind'a

Tailwind CSS oferuje wiele ciekawych wtyczek, które rozwiązują za nas pewne problemy związane ze stylowaniem naszej aplikacji. Jednym z najbardziej popularnych dodatków jest oficjalna paczka @tailwindcss/typography, która sprawi, ze nasze artykuły staną się bardzo czytelne. Instalacja dodatków do tailwind'a jest bardzo prosta. W tym celu wykonujemy polecenie:

npm install -D @tailwindcss/typography

a następnie dodajemy wtyczkę do pliku tailwind.config.js:

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

Każda wtyczka ma pewne opcje, które możemy konfigurować, ale tym zajmiemy się nieco później.

Żeby upewnić się, ze dodatek działa prawidłowo, zdefiniujemy szablon naszego bloga. W pliku app/routes/blog.tsx dodamy następujący kod:

import { Outlet } from '@remix-run/react'

const Blog = () => {
  return (
    <article className="prose lg:prose-xl mx-auto my-16">
      <Outlet />
    </article>
  )
}

export default Blog

<Outlet /> - jest to komponent, który działa jak portal, w którym będzie renderowana treść kolejnych zagnieżdżonych części danej ścieżki. Dla przykładu jeżeli mamy ścieżkę: kacgrzes.io/blog/hello-world, to Outlet w pliku z definicją szablonu blog.tsx, wyrenderuje to, co znajduje się w pliku hello-world.

Ostatnim krokiem będzie poprawienie ścieżek w głównej nawigacji. W pliku app/routes/index.tsx dodamy następujący kod:

import { Link } from '@remix-run/react'

export default function Index() {
  return (
    <main className="p-6">
      <h1 className="text-4xl">Blog</h1>
      <ul className="mt-4 leading-7">
        <li>
          <Link to={'/blog/tailwind-setup'}>
            Personal website - Tailwind CSS setup
          </Link>
        </li>
        <li>
          <Link to={'/blog/copywriter-tool-belt'}>
            Copywriter - my tool belt
          </Link>
        </li>
        <li>
          <Link to={'/blog/remix-basics'}>
            Personal website - remix basics 💿
          </Link>
        </li>
        <li>
          <Link to={'/blog/project-launch'}>
            Personal website - project launch
          </Link>
        </li>
        <li>
          <Link to={'/blog/hello-world'}>Hello World!</Link>
        </li>
      </ul>
    </main>
  )
}

Do listy z artykułami dodałem link do artykułu, który właśnie pisze oraz zadbałem o dodanie przedrostka /blog do każdego z nich.

Artykuły są teraz ostylowane tak jak powinny :)

Bonus — dark mode

Ciemny tryb w Tailwind jest niesamowicie prosty do zaimplementowania. Framework posiada modyfikator :dark. Spróbujmy dodać tryb ciemny do strony:

plik app/root.tsx:

<body className="bg-white dark:bg-slate-800">
  <Outlet />
  <ScrollRestoration />
  <Scripts />
  <LiveReload />
</body>

Normalnie, dla trybu jasnego, będziemy mieli kolor tła bg-white, a dla ciemnego bg-slate-800.

Plik app/routes/index.tsx:

export default function Index() {
  return <main className="p-6 dark:text-white">...</main>
}

plik app/routes/blog.tsx:

const Blog = () => {
  return (
    <article className="prose lg:prose-xl dark:prose-invert mx-4 my-16 sm:mx-auto">
      <Outlet />
    </article>
  )
}

To tylko początek przygody z Tailwindem. Na pewno jeszcze do niego wrócę.

Drobna uwaga:

plik app/styles/app.css jest generowany automatycznie, więc nie trzeba go commitować do repozytorium. W związku z tym, należy dodać ten plik do .gitignore.

exit

Poniżej znajdziesz więcej postów, które mogą Cię zainteresować.

Copywriter — pas narzędziowy 🛠Prettier + Tailwind = ❤️