feat(frontend): Add Tailwind CSS custom data and ignore SCSS unknown …

…at-rules

This commit adds the Tailwind CSS custom data file to the VS Code settings, allowing for better auto-completion and IntelliSense for Tailwind CSS classes. Additionally, it ignores SCSS unknown at-rules in the SCSS linter configuration to avoid unnecessary warnings.

frontend/.vscode/settings.json

@@ -29,6 +29,10 @@
  "[html]": {
  "editor.defaultFormatter": "vscode.html-language-features"
  },
+ "css.customData": [
+ ".vscode/tailwind.json"
+ ],
+ "scss.lint.unknownAtRules": "ignore",
  "prettier.configPath": ".prettierrc.js",
  "editor.wordWrap": "off",
  "[xml]": {

frontend/.vscode/tailwind.json

@@ -0,0 +1,55 @@
+{
+ "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": "@apply",
+ "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+ "references": [
+ {
+ "name": "Tailwind Documentation",
+ "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+ }
+ ]
+ },
+ {
+ "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"
+ }
+ ]
+ }
+ ]
+}

frontend/package.json

@@ -35,6 +35,7 @@
  "@segment/analytics-next": "^1.55.0",
  "@sentry/vue": "^7.64.0",
  "@simplewebauthn/browser": "^8.0.2",
+ "@sjmc11/tourguidejs": "^0.0.10",
  "@tailwindcss/aspect-ratio": "^0.4.2",
  "@tailwindcss/forms": "^0.5.6",
  "@tailwindcss/line-clamp": "^0.4.4",