devnews.pl

Main Menu

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania

logo

devnews.pl

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania
Frontend
Home›Frontend›Tailwind CSS 2.0 z narzędziami kontroli tekstu

Tailwind CSS 2.0 z narzędziami kontroli tekstu

By Bernadeta Zapała
24 listopada 2020
178
0
Share:

W ubiegłym tygodniu udostępniono dużą aktualizację struktury CSS, która zapewnia wszystkie elementy potrzebne do tworzenia projektów na zamówienie. Od ostatniej pełnej wersji minęło półtora roku, a do narzędzia dodano wiele nowych funkcji, np. widoczność czytnika ekranu, siatka CSS, przejścia czy narzędzie do krycia kolorów (Tailwind CSS v.1.4). Tailwind CSS 2.0 posiada m.in. zupełnie nową paletę kolorów, obsługę ciemnego motywu, a także narzędzia kontroli przepełnienia tekstu.

Dark mode w Tailwind CSS 2.0

Jednym z ostatnich trendów w świecie aplikacji jest ciemny motyw. Ma go już wiele aplikacji i narzędzi, dlatego też dodano go do Tailwind. Dzięki obsłudze trybu ciemnego dynamiczna zmiana projektu jest łatwiejsza. Wystarczy otworzyć plik konfiguracyjny tailwind.config.js i ustawić darkMode na media:

// tailwind.config.js
module.exports = {
  darkMode: 'media',
  // ...
}

Następnie trzeba dodać na początek klasy dark: :

<div class="bg-white dark:bg-black">
  <h1 class="text-gray-900 dark:text-white">Dark mode</h1>
  <p class="text-gray-500 dark:text-gray-300">
    Na to wszyscy czekaliśmy!
  </p>
</div>

Nowa paleta kolorów

Przede wszystkim nowością jest paleta kolorów posiadająca 22 kolory w dziesięciu odcieniach.

220 nowych odcieni w Tailwind CSS 2.0

220 nowych odcieni w Tailwind CSS 2.0

Ponadto w palecie znajduje się 5 różnych odcieni szarości – od cieplejszego odcienia po niebiesko-szary.

Odcienie szarości

Odcienie szarości

Paleta jest także dostępna w specjalnie przygotowanym module tailwindcss/colors. Można go zaimportować u góry pliku konfiguracyjnego:

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      gray: colors.trueGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.amber,
    },
  },
}

Kontury pierścieni – nowe narzędzia

Z pewnością warto zwrócić uwagę na nowe narzędzie do konturów pierścieni. Narzędzie ring działa podobnie do narzędzia border. Jednak zamiast dodawania obramowania daje jednolity cień pola.

<button
  class="... focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50"
> 
  <!-- ... -->
</button>

Co ciekawe, za pomocą narzędzi ring-offset-{width} można stworzyć efekt halo.

<button
  class="... focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-300 
  focus:ring-opacity-50"
> 
  <!-- ... -->
</button>

Style formularzy w Tailwind CSS 2.0

We wcześniejszych wersjach formularze były dość specyficzne. Nie miały odpowiedniego wyglądu, poprawki były możliwe wyłącznie przez pisanie niestandardowego CSS pełnego dziwnych trików SVG w tle. Dlatego też nowa aktualizacja Tailwind dostarcza oficjalną wtyczkę @tailwindcss/forms. Przede wszystkim normalizuje ona i resetuje podstawowe kontrolki formularzy w przeglądarkach do stanu. Wtyczka nie jest dostępna bez dodatkowej konfiguracji. Można dodać ją przy pomocy jednej linii kodu:

// tailwind.config.js
module.exports = {
  // ...
  plugins: [require('@tailwindcss/forms')],
}

Narzędzia przepełnienia tekstu

Tailwind CSS 2.0 otrzymało także nowe narzędzia do kontroli właściwości text-overflow – overflow-ellipsis i overflow-clip. Pierwszy z nich służy do obcinania przepełnionego tekstu za pomocą wielokropka. Z kolei overflow-clip obcina tekst na granicy obszaru zawartości.

Domyślny czas trwania przejścia w Tailwind CSS 2.0

Dotychczas chcąc dodać przejście, programista dodawał trzy klasy:

<button class="... transition duration-150 ease-in-out">Count them</button>

Teraz można określić domyślny czas trwania i funkcję czasu. Jest ona automatycznie używana za każdym razem, gdy dodane jest narzędzie transitionProperty.

// tailwind.config.js
module.exports = {
  // ...
  theme: {
    // ...
    transitionDuration: {
      DEFAULT: '150ms',
      // ...
    },
    transitionTimingFunction: {
      DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
      // ...
    },
  },
}

Dzięki temu wystarczy napisać jedną klasę:

<button class="... transition">Count them again</button>

Koniec obsługi IE11

Kolejną ważną zmianą jest porzucenie obsługi IE11. Dzięki temu kompilacje będą mniejsze, także przy korzystaniu z PurgeCSS. Programiści, którzy wciąż potrzebują obsługi IE11, mają możliwość korzystania z wersji 1.9.

Podsumowanie

Prezentacja wszystkich nowych opcji Tailwind CSS 2.0 znajduje się na oficjalnym blogu frameworka. Dostępny jest także przewodnik po aktualizacji dla Tailwind.

Źródło: Tailwind Blog

TagsCSSFrameworkTailwind CSS

Share:

  • Języki programowaniaSystemy i przeglądarki

    Swift wprowadzony do Windows 10 z obrazami toolchain

  • Systemy i przeglądarki

    Web Capture – nowa funkcja testowana w Edge Canary

  • Języki programowania

    ES2020 – ciekawe funkcje JavaScript

  • 13 kwietnia 2021

    TypeScript 4.3 beta z oddzielnymi typami zapisu

  • 7 kwietnia 2021

    Billboard.js 3.0 z nowym typem świecy

  • 2 kwietnia 2021

    Silnik V8 9.0 beta udostępniony

  • 1 kwietnia 2021

    ReacType 6.0 z nowym dashboardem

  • 29 marca 2021

    Udostępniono Android 12 Developer Preview 2

  • 24 marca 2021

    Git 2.31 dostępny z konserwacją w tle

  • 19 marca 2021

    Relay Hooks – nowy zestaw interfejsów API

  • 18 marca 2021

    Deno 1.8 ze wsparciem interfejsu API WebGPU 

  • 16 marca 2021

    React Native 0.64 z silnikiem Hermes na iOS

  • 9 marca 2021

    Windows Terminal Preview 1.7 z lepszym zarządzaniem oknami

  • 3 marca 2021

    Vite 2.0 wydane z nowymi wtyczkami

  • 25 lutego 2021

    ReacType 5.0 – zmiany we wprowadzaniu komponentów

  • 23 lutego 2021

    Dapr v.1.0 gotowy do fazy produkcji

  • 22 lutego 2021

    ReScript 9.0 z zewnętrzną konfiguracją stdlib

  • 22 lutego 2021

    One UI 3.1 z ciekawymi nowościami dla urządzeń Samsunga

  • 22 lutego 2021

    Windows Terminal Preview 1.6 z nową sekcją ustawień

  • 15 lutego 2021

    Visual Studio Code 1.53 z ulepszeniami debugowania

  • 8 lutego 2021

    Edge 89 beta, Edge Dev 90 i nowości na kanale Canary

  • 2 lutego 2021

    Firefox 85 i Firefox Nightly – nowe wersje przeglądarki Mozilli

  • 29 stycznia 2021

    Billboard.js 2.2.0 z nowymi funkcjami wykresów

  • 26 stycznia 2021

    Kendo UI R1 2021 – nowości dla bibliotek

  • 21 stycznia 2021

    Narzędzie Vno – połączenie Vue i Deno

  • 19 stycznia 2021

    GitHub Enterprise Server 3.0 RC – kandydat do wydania

  • 15 stycznia 2021

    TypeScript 4.2 Beta z ulepszeniami typów krotek

  • 13 stycznia 2021

    Styczniowy Patch Tuesday z luką 0-day

  • 11 stycznia 2021

    Safari Technology Preview 118 dostępne dla programistów

  • 8 stycznia 2021

    Microsoft Launcher na Androida z usprawnionym dotykiem

  • 7 stycznia 2021

    WebStorm 2020.3.1 dostępny dla urządzeń z Apple Silicon

  • 22 grudnia 2020

    ReScript 8.4 z przypiętymi zależnościami

  • 14 grudnia 2020

    Edge 88 beta i przeglądarka na kanale Canary dostępne!

 

 

Jesteśmy pasjonatami najnowszych technologii w świecie programowania. Zbieramy dla Was informacje i porady z całego świata, które sprawią, że Twoja praca stanie się jeszcze bardziej efektywna.

Obserwuj nas codziennie, aby być na bieżąco oraz śmiało udostępniaj nasze posty.

Zespół DevNews

Kategorie

  • Backend
  • Bez kategorii
  • Frontend
  • Gadżety
  • Informacje
  • Języki programowania
  • Narzędzia
  • QA
  • Systemy i przeglądarki

OBSERWUJ NAS

KONTAKT

Chcesz się z nami skontaktować?

Napisz do nas wiadomość: kontakt@devnews.pl

www.devnews.pl | DEVNEWS 2020 | Newsy i ciekawostki ze świata IT