Jak začít používat tailwind-css na novém projektu:

1. vložím soubor tailwind.config.js kde je package.json. pokud flowbite nepoužíváte, řádky obsahující zakomentujte

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

npm run twWithoutWatch &&

a zároveň tyhle 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)

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

Vložím / upravím do složky .vscode 3 soubory, první je css_custom_data.json

{
  "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

{
	"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:

{
"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 🙂