🢂Tailwind CSS ‑ ściąga

Najprostszym i najszybszym sposobem na rozpoczęcie pracy z Tailwind CSS od podstaw jest użycie narzędzia Tailwind CLI. Narzędzie to pozwala zainstalować Tailwind CSS w swoim projekcie, a także utworzyć plik konfiguracyjny, który zawiera wszystkie niezbędne ustawienia.

Przejdź do folderu projektu

cd my-project

Utwórz odpowiednie foldery

mkdir public/css
mkdir public/js
>public/css/input.css

Zainstaluj Tailwind CSS

Zainstaluj tailwindcss przez npm i utwórz plik tailwind.config.js.

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

npm install -D @tailwindcss/container-queries
npm install -D @tailwindcss/aspect-ratio
npm install -D @tailwindcss/typography
npm install -D @tailwindcss/forms

Edytuj plik szablonów

code tailwind.config.js

Konfiguracja ścieżek szablonów (public zmień na swoje)

/** @type {import('tailwindcss').Config} */
const plugin = require('tailwindcss/plugin');
export default {
    content: ['./public/**/*.{html,js,php,vue,twig}', './app/Views/**/*.php'],
    theme: {
        extend: {
            fontFamily: {
                lato: ['Lato', 'sans-serif'],
            },
        },
    },
    plugins: [require('@tailwindcss/container-queries'), require('@tailwindcss/aspect-ratio'), require('@tailwindcss/typography'), require('@tailwindcss/forms')],
};

Edytuj input.css

code public/css/input.css

Dodaj dyrektywy Tailwind do input.css

Dodaj dyrektywy @tailwind dla każdej z warstw Tailwind do pliku ./public/css/input.css wraz z fontem Lato

@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,700;1,900&display=swap');

@layer components {
}

Rozpocznij proces kompilacji

uruchom proces kompilacji za pomocą npm run.

npm run

Uruchom proces kompilacji Tailwind CLI

Uruchom narzędzie CLI, aby przeskanować pliki szablonu w poszukiwaniu klas i utworzyć CSS.

npx tailwindcss -i ./public/css/input.css -o ./public/css/styles.css --watch

Dodaj styl do widoku

<link
    href="/css/styles.css"
    rel="stylesheet" />
lub
<link
    href="/public/css/styles.css"
    rel="stylesheet" />

Wybierz paletę kolorów w generatorze

Stwórz paletę na jednej ze stron:

• https://www.tints.dev/
• https://uicolors.app/create

Dodaj ją do pliku szablonów

code tailwind.config.js

Dodaj kolory do tailwind.config.js

/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors');
const plugin = require('tailwindcss/plugin');
export default {
    content: ['./public/**/*.{html,js,php,vue,twig}', './app/Views/**/*.php'],
    theme: {
        extend: {
            fontFamily: {
                lato: ['Lato', 'sans-serif'],
            },
        },
        colors: {
            white: '#FFF',
            szary: '#E6E6E6',
            transparent: 'transparent',
            current: 'currentColor',
            amber: colors.amber,
            black: '#000',
            blue: colors.blue,
            blueGray: colors.blueGray,
            coolGray: colors.coolGray,
            cyan: colors.cyan,
            emerald: colors.emerald,
            fuchsia: colors.fuchsia,
            gray: colors.gray,
            green: colors.green,
            indigo: colors.indigo,
            lightBlue: colors.lightBlue,
            lime: colors.lime,
            orange: colors.orange,
            pink: colors.pink,
            purple: colors.purple,
            red: colors.red,
            rose: colors.rose,
            teal: colors.teal,
            trueGray: colors.trueGray,
            violet: colors.violet,
            warmGray: colors.warmGray,
            white: '#FFF',
            yellow: colors.yellow,
            scooter: {
                50: 'hsl(183, 100%, 96%)',
                100: 'hsl(184, 100%, 90%)',
                200: 'hsl(185, 100%, 82%)',
                300: 'hsl(185, 97%, 69%)',
                400: 'hsl(187, 91%, 53%)',
                500: 'hsl(187, 100%, 40%)',
                600: 'hsl(190, 97%, 36%)',
                700: 'hsl(192, 87%, 31%)',
                800: 'hsl(194, 74%, 27%)',
                900: 'hsl(195, 67%, 24%)',
                950: 'hsl(195, 84%, 15%)',
            },
        },
    },
    plugins: [require('@tailwindcss/container-queries'), require('@tailwindcss/aspect-ratio'), require('@tailwindcss/typography'), require('@tailwindcss/forms')],
};

Na koniec

touch .gitignore && echo "node_modules/" >> .gitignore && git rm -r --cached node_modules ; git status

.gitignore

node_modules/
vendor/
*.phar
.*
.*/
!/.gitignore
*.cache
*.log
*.lock
*.sql
*.config
*.conf
*.ini
.vscode