diff --git a/queries/javascript/class.scm b/queries/javascript/class.scm
index 7396d43..4955b78 100644
--- a/queries/javascript/class.scm
+++ b/queries/javascript/class.scm
@@ -1,3 +1,5 @@
+; inherits: tsx
+
 (call_expression
   function: [
     (identifier) @ident
diff --git a/queries/typescript/class.scm b/queries/typescript/class.scm
index ff0ddfa..7396d43 100644
--- a/queries/typescript/class.scm
+++ b/queries/typescript/class.scm
@@ -1 +1,14 @@
-; inherits: javascript
+(call_expression
+  function: [
+    (identifier) @ident
+    (member_expression
+      object: (identifier) @object-ident)
+  ]
+  (#any-of? @ident "clsx" "classnames" "tw" "css")
+  (#eq? @object-ident "tw")
+  arguments: [
+    (arguments
+      (_)+) @tailwind ; the actual class range is extracted in the code
+    (template_string
+      (string_fragment) @tailwind)
+  ])
diff --git a/tests/parsers.lua b/tests/parsers.lua
index 8020406..8c0d654 100644
--- a/tests/parsers.lua
+++ b/tests/parsers.lua
@@ -11,6 +11,7 @@ local parsers = {
   "heex",
   "elixir",
   "javascript",
+  "typescript",
   "templ",
 }
 
diff --git a/tests/queries/javascript/Component.jsx b/tests/queries/javascript/Component.jsx
new file mode 100644
index 0000000..bbba4c0
--- /dev/null
+++ b/tests/queries/javascript/Component.jsx
@@ -0,0 +1,23 @@
+const color = "text-blue-300";
+
+const Component = () => {
+  return (
+    <div>
+      <div
+        className="flex items-center justify-center container mx-auto p-4
+        border-2 border-gray-500 rounded-md bg-gray-100"
+      >
+        <div className="text-2xl font-bold mb-4">
+          Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
+          cillum sint consectetur cupidatat.
+        </div>
+        <div className={`${color} bg-gray-100`}>
+          Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
+          cillum sint consectetur cupidatat.
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Component;
diff --git a/tests/queries/javascript_spec.lua b/tests/queries/javascript_spec.lua
index 6f52ec9..0ad8d0b 100644
--- a/tests/queries/javascript_spec.lua
+++ b/tests/queries/javascript_spec.lua
@@ -1,4 +1,6 @@
-require("tests.queries.runner").test({
+local runner = require("tests.queries.runner")
+
+runner.test({
   name = "javascript",
   provider = "treesitter",
   file = "tests/queries/javascript/test.js",
@@ -9,3 +11,14 @@ require("tests.queries.runner").test({
     { 3, 9, 3, 34 },
   },
 })
+
+runner.test({
+  name = "javascriptreact",
+  provider = "treesitter",
+  file = "tests/queries/javascript/Component.jsx",
+  ranges = {
+    { 6, 19, 7, 55 },
+    { 9, 24, 9, 47 },
+    { 13, 24, 13, 46 },
+  },
+})
diff --git a/tests/queries/typescript/test.ts b/tests/queries/typescript/test.ts
new file mode 100644
index 0000000..203a66f
--- /dev/null
+++ b/tests/queries/typescript/test.ts
@@ -0,0 +1,4 @@
+clsx("p-4", "text-center");
+classnames("bg-red-500", "uppercase");
+tw`font-mono text-sm`
+tw.input`border hover:border-black`
diff --git a/tests/queries/typescript_spec.lua b/tests/queries/typescript_spec.lua
new file mode 100644
index 0000000..54b7c77
--- /dev/null
+++ b/tests/queries/typescript_spec.lua
@@ -0,0 +1,11 @@
+require("tests.queries.runner").test({
+  name = "typescript",
+  provider = "treesitter",
+  file = "tests/queries/typescript/test.ts",
+  ranges = {
+    { 0, 5, 0, 25 },
+    { 1, 11, 1, 36 },
+    { 2, 3, 2, 20 },
+    { 3, 9, 3, 34 },
+  },
+})