Jak začít používat tailwind-css na novém projektu:
- vložím soubor tailwind.config.js kde je package.json. pokud flowbite nepoužíváte, řádky obsahující zakomentujte
|
1 2 3 4 5 6 7 |
module.exports = { content: [ "./src/components/**/*.{ts,tsx}", "./node_modules/flowbite/**/*.js" ], plugins: [require('flowbite/plugin')], } |
2. nainstaluji balíček tailwindcss
3. přidám do “build” scriptu
|
1 |
npm run twWithoutWatch && |
a zároveň tyhle 2
|
1 2 |
"tw": "npx tailwindcss -i ./src/index.css -o ./public/tw.css -w", "twWithoutWatch": "npx tailwindcss -i ./src/index.css -o ./public/tw.css", |
4. Vložím do základního css (v mém případě ./src/index.css)
|
1 2 3 |
@tailwind base; @tailwind components; @tailwind utilities; |
Vložím / upravím do složky .vscode 3 soubory, první je css_custom_data.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
{ "version": 1.1, "atDirectives": [ { "name": "@tailwind", "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.", "references": [ { "name": "Tailwind Documentation", "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind" } ] }, { "name": "@responsive", "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n", "references": [ { "name": "Tailwind Documentation", "url": "https://tailwindcss.com/docs/functions-and-directives#responsive" } ] }, { "name": "@screen", "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n", "references": [ { "name": "Tailwind Documentation", "url": "https://tailwindcss.com/docs/functions-and-directives#screen" } ] }, { "name": "@variants", "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n", "references": [ { "name": "Tailwind Documentation", "url": "https://tailwindcss.com/docs/functions-and-directives#variants" } ] }, { "name": "@layer", "description": "Declares a cascade layer." } ] } |
tasks.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{ "version": "2.0.0", "tasks": [ { "type": "typescript", "tsconfig": "tsconfig.json", "problemMatcher": [ "$tsc" ], "group": { "kind": "build", "isDefault": true }, "label": "tsc: build - tsconfig.json" } ] } |
a do settings.json:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "css.customData": [ ".vscode/css_custom_data.json" ], "files.exclude": { "**/*.js": { "when": "$(basename).ts" }, "**/**.js": { "when": "$(basename).tsx" } } } |
5. přidám tw.css do .gitignore. na localhost npm run build projde i když existuje ale na Azure DevOps pipeline už ne. Nebo odstraním twWithoutWatch z package.json.
Teď už stačí jen spustit druhý terminál, npm run tw, editovat a užívat si výhody 🙂