From 5e464b618b688b2bc478a1671bb2549d3053a86a Mon Sep 17 00:00:00 2001
From: Duy Dang <duy.dang@decision-science.com>
Date: Wed, 12 Jun 2024 14:14:50 +0800
Subject: [PATCH] update fix warning apply tailwind
---
.vscode/settings.json | 1 +
.vscode/tailwind.json | 55 +++++++++++++++++++++++++++++++++++++++++++
2 files changed, 56 insertions(+)
create mode 100644 .vscode/tailwind.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
index f599308..591414a 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -10,6 +10,7 @@
"eslint.workingDirectories": ["./frontend"],
"editor.insertSpaces": true,
"editor.tabSize": 2,
+ "css.customData": [".vscode/tailwind.json"],
"python.analysis.autoImportCompletions": true,
"python.analysis.indexing": true,
"python.analysis.fixAll": ["source.unusedImports"],
diff --git a/.vscode/tailwind.json b/.vscode/tailwind.json
new file mode 100644
index 0000000..96a1f57
--- /dev/null
+++ b/.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"
+ }
+ ]
+ }
+ ]
+}