diff --git a/website/layouts/shortcodes/openssl-version.html b/website/layouts/shortcodes/openssl-version.html
index fc5cf0208a239..48d6a1188d054 100644
--- a/website/layouts/shortcodes/openssl-version.html
+++ b/website/layouts/shortcodes/openssl-version.html
@@ -1,3 +1,7 @@
{{- $package := partialCached "cargo-package" "openssl-src" -}}
{{- $openssl_version := index (strings.Split $package.version "+") 1 -}}
-{{- with .Get "majMin" -}}{{- with strings.Split $openssl_version "." -}}{{- index . 0 -}}.{{- index . 1 -}}{{- end -}}{{- else -}}{{- $openssl_version -}}{{- end -}}
+{{- with .Get "majMin" -}}
+ {{- with strings.Split $openssl_version "." -}}{{- index . 0 -}}.{{- index . 1 -}}{{- end -}}
+{{- else -}}
+ {{- $openssl_version -}}
+{{- end -}}
diff --git a/website/layouts/shortcodes/pages.html b/website/layouts/shortcodes/pages.html
index 1216d5c5bef69..1f1cd0132f747 100644
--- a/website/layouts/shortcodes/pages.html
+++ b/website/layouts/shortcodes/pages.html
@@ -1,7 +1,7 @@
{{ with $.Page.RegularPages }}
-
- {{ range . }}
- {{ .Render "li" }}
- {{ end }}
-
+ {{ range . }}
+ {{ .Render "li" }}
+ {{ end }}
+
+{{ end }}
diff --git a/website/layouts/shortcodes/quote.html b/website/layouts/shortcodes/quote.html
index 32accbae5414a..ebb9dfdcec727 100644
--- a/website/layouts/shortcodes/quote.html
+++ b/website/layouts/shortcodes/quote.html
@@ -1 +1 @@
-{{ partial "admonition.html" (dict "type" "quote" "icon" "quote-right" "content" .Inner "title" (.Get "title")) }}
\ No newline at end of file
+{{ partial "admonition.html" (dict "type" "quote" "icon" "quote-right" "content" .Inner "title" (.Get "title")) }}
diff --git a/website/layouts/shortcodes/requirement.html b/website/layouts/shortcodes/requirement.html
index 75384bc073319..158fb219865db 100644
--- a/website/layouts/shortcodes/requirement.html
+++ b/website/layouts/shortcodes/requirement.html
@@ -1 +1 @@
-{{ partial "admonition.html" (dict "type" "requirement" "icon" "wrench" "content" .Inner "title" (.Get "title")) }}
\ No newline at end of file
+{{ partial "admonition.html" (dict "type" "requirement" "icon" "wrench" "content" .Inner "title" (.Get "title")) }}
diff --git a/website/layouts/shortcodes/roles.html b/website/layouts/shortcodes/roles.html
index c32e66b4c17a6..d27b4bcb4fd6f 100644
--- a/website/layouts/shortcodes/roles.html
+++ b/website/layouts/shortcodes/roles.html
@@ -1,27 +1,26 @@
{{ $roles := site.Data.docs.administration.roles }}
{{ range $k, $v := $roles }}
-{{ partial "heading.html" (dict "text" $v.title "level" 2) }}
+ {{ partial "heading.html" (dict "text" $v.title "level" 2) }}
-{{ with $v.sub_roles }}
-{{ range . }}
-{{ partial "heading.html" (dict "text" .title "level" 3) }}
-{{ template "role-image" .name }}
-{{ template "role-description" .description }}
-{{ end }}
-{{ else }}
-{{ template "role-image" $k }}
-{{ end }}
-{{ template "role-description" $v.description }}
+ {{ with $v.sub_roles }}
+ {{ range . }}
+ {{ partial "heading.html" (dict "text" .title "level" 3) }}
+ {{ template "role-image" .name }}
+ {{ template "role-description" .description }}
+ {{ end }}
+ {{ else }}
+ {{ template "role-image" $k }}
+ {{ end }}
+ {{ template "role-description" $v.description }}
{{ end }}
-
{{ define "role-image" }}
-{{ $svg := printf "img/roles/%s.svg" . }}
-{{ partial "svg.html" (dict "src" $svg) }}
+ {{ $svg := printf "img/roles/%s.svg" . }}
+ {{ partial "svg.html" (dict "src" $svg) }}
{{ end }}
{{ define "role-description" }}
-
- {{ . | markdownify }}
-
+ {{ . | markdownify }}
+
+{{ end }}
diff --git a/website/layouts/shortcodes/sections.html b/website/layouts/shortcodes/sections.html
index 365b8950f9b53..63746a98e33fa 100644
--- a/website/layouts/shortcodes/sections.html
+++ b/website/layouts/shortcodes/sections.html
@@ -1,7 +1,7 @@
{{ with $.Page.Sections }}
-
- {{ range . }}
- {{ .Render "li" }}
- {{ end }}
-
+ {{ range . }}
+ {{ .Render "li" }}
+ {{ end }}
+
+{{ end }}
diff --git a/website/layouts/shortcodes/success.html b/website/layouts/shortcodes/success.html
index d36ec77488101..070935dadcc8b 100644
--- a/website/layouts/shortcodes/success.html
+++ b/website/layouts/shortcodes/success.html
@@ -1 +1 @@
-{{ partial "admonition.html" (dict "type" "success" "icon" "check-circle" "content" .Inner "title" (.Get "title")) }}
\ No newline at end of file
+{{ partial "admonition.html" (dict "type" "success" "icon" "check-circle" "content" .Inner "title" (.Get "title")) }}
diff --git a/website/layouts/shortcodes/supported-installers.html b/website/layouts/shortcodes/supported-installers.html
index c669974467ee1..03efa18c8a28f 100644
--- a/website/layouts/shortcodes/supported-installers.html
+++ b/website/layouts/shortcodes/supported-installers.html
@@ -1,14 +1,14 @@
{{ $supported := $.Page.Params.supported_installers }}
\ No newline at end of file
+
diff --git a/website/layouts/shortcodes/svg.html b/website/layouts/shortcodes/svg.html
index 6a842a04fbb53..b2b6baf8d2ff9 100644
--- a/website/layouts/shortcodes/svg.html
+++ b/website/layouts/shortcodes/svg.html
@@ -1,2 +1,2 @@
{{ $src := .Get 0 }}
-{{ partial "svg.html" (dict "src" $src) }}
\ No newline at end of file
+{{ partial "svg.html" (dict "src" $src) }}
diff --git a/website/layouts/shortcodes/tab.html b/website/layouts/shortcodes/tab.html
index 0c6640049fb73..e1b5c27199407 100644
--- a/website/layouts/shortcodes/tab.html
+++ b/website/layouts/shortcodes/tab.html
@@ -1,8 +1,11 @@
{{ $title := .Params.title }}
{{ $slug := .Params.title | urlize }}
{{ $.Page.Scratch.SetInMap "tabs" $slug .Inner }}
-
diff --git a/website/layouts/shortcodes/tabs.html b/website/layouts/shortcodes/tabs.html
index 3cdf19d673c63..4fd2b93f908ef 100644
--- a/website/layouts/shortcodes/tabs.html
+++ b/website/layouts/shortcodes/tabs.html
@@ -1,19 +1,22 @@
{{ if not .Params.default }}
-{{ errorf "no default tab specified in tabs shortcode %s" .File }}
+ {{ errorf "no default tab specified in tabs shortcode %s" .File }}
{{ end }}
{{ $default := .Params.default | urlize }}
-
+
{{ .Inner }}
{{ range $k, $v := $.Page.Scratch.Get "tabs" }}
-
- {{ $v | $.Page.RenderString }}
-
+
+ {{ $v | $.Page.RenderString }}
+
{{ end }}
{{/* Reset Scratch for the "tabs" key, allowing for more than one tabs shortcode on a page */}}
-{{ $.Page.Scratch.Set "tabs" dict }}
\ No newline at end of file
+{{ $.Page.Scratch.Set "tabs" dict }}
diff --git a/website/layouts/shortcodes/topologies.html b/website/layouts/shortcodes/topologies.html
index 9244795615219..e2c6b1c0d954b 100644
--- a/website/layouts/shortcodes/topologies.html
+++ b/website/layouts/shortcodes/topologies.html
@@ -1,32 +1,35 @@
{{ $topologies := sort site.Data.docs.administration.topologies ".order" }}
{{ range $topologies }}
-{{ partial "heading.html" (dict "text" .title "level" 2) }}
-{{ template "topology-image" .title }}
+ {{ partial "heading.html" (dict "text" .title "level" 2) }}
+ {{ template "topology-image" .title }}
-
- {{ .description | markdownify }}
-
-{{ partial "heading.html" (dict "text" "Pros" "level" 3 "id" (printf "pros-%s" (.title | urlize))) }}
-
- {{ range .pros }}
- -
- {{ .title }}. {{ .description | markdownify }}
-
- {{ end }}
-
+
+ {{ .description | markdownify }}
+
-{{ partial "heading.html" (dict "text" "Cons" "level" 3 "id" (printf "cons-%s" (.title | urlize))) }}
-
- {{ range .cons }}
- -
- {{ .title }}. {{ .description | markdownify }}
-
- {{ end }}
-
+ {{ partial "heading.html" (dict "text" "Pros" "level" 3 "id" (printf "pros-%s" (.title | urlize))) }}
+
+ {{ range .pros }}
+ -
+ {{ .title }}.
+ {{ .description | markdownify }}
+
+ {{ end }}
+
+
+ {{ partial "heading.html" (dict "text" "Cons" "level" 3 "id" (printf "cons-%s" (.title | urlize))) }}
+
+ {{ range .cons }}
+ -
+ {{ .title }}.
+ {{ .description | markdownify }}
+
+ {{ end }}
+
{{ end }}
{{ define "topology-image" }}
-{{ $svg := printf "img/topologies/%s.svg" (. | urlize) }}
-{{ partial "svg.html" (dict "src" $svg) }}
-{{ end }}
\ No newline at end of file
+ {{ $svg := printf "img/topologies/%s.svg" (. | urlize) }}
+ {{ partial "svg.html" (dict "src" $svg) }}
+{{ end }}
diff --git a/website/layouts/shortcodes/version.html b/website/layouts/shortcodes/version.html
index 197ec0ed2254f..f885d1aa1a59f 100644
--- a/website/layouts/shortcodes/version.html
+++ b/website/layouts/shortcodes/version.html
@@ -1 +1 @@
-{{- index site.Data.docs.versions 0 -}}
\ No newline at end of file
+{{- index site.Data.docs.versions 0 -}}
diff --git a/website/layouts/shortcodes/vrl/concepts.html b/website/layouts/shortcodes/vrl/concepts.html
index edaa783ef4ec2..556d814a81879 100644
--- a/website/layouts/shortcodes/vrl/concepts.html
+++ b/website/layouts/shortcodes/vrl/concepts.html
@@ -1,2 +1,2 @@
{{ $concepts := site.Data.docs.remap.concepts }}
-{{ partial "data.html" (dict "vrl_concepts" $concepts) }}
\ No newline at end of file
+{{ partial "data.html" (dict "vrl_concepts" $concepts) }}
diff --git a/website/layouts/shortcodes/vrl/dynamic-expressions.html b/website/layouts/shortcodes/vrl/dynamic-expressions.html
index fa816ba348876..12ff9489f134e 100644
--- a/website/layouts/shortcodes/vrl/dynamic-expressions.html
+++ b/website/layouts/shortcodes/vrl/dynamic-expressions.html
@@ -1,2 +1,2 @@
{{ $expressions := index site.Data.docs.remap.expressions }}
-{{ partial "data.html" (dict "vrl_expressions" $expressions) }}
\ No newline at end of file
+{{ partial "data.html" (dict "vrl_expressions" $expressions) }}
diff --git a/website/layouts/shortcodes/vrl/errors/compile-time.html b/website/layouts/shortcodes/vrl/errors/compile-time.html
index d58a86cb0a5e8..6ae4c20c3dd60 100644
--- a/website/layouts/shortcodes/vrl/errors/compile-time.html
+++ b/website/layouts/shortcodes/vrl/errors/compile-time.html
@@ -1,2 +1,2 @@
{{ $errors := site.Data.docs.remap.errors }}
-{{ partial "data.html" (dict "vrl_compile_time_errors" $errors) }}
\ No newline at end of file
+{{ partial "data.html" (dict "vrl_compile_time_errors" $errors) }}
diff --git a/website/layouts/shortcodes/vrl/examples.html b/website/layouts/shortcodes/vrl/examples.html
index 54827fae496e0..0b85f044ce365 100644
--- a/website/layouts/shortcodes/vrl/examples.html
+++ b/website/layouts/shortcodes/vrl/examples.html
@@ -1,16 +1,16 @@
{{ $categories := site.Data.docs.remap.function_categories }}
{{ range $categories }}
-{{ $category := . }}
-{{ $funcs := slice }}
-{{ range $k, $func := site.Data.docs.remap.functions }}
-{{ if eq $func.category $category }}
-{{ $funcs = $funcs | append $func }}
-{{ end }}
-{{ end }}
+ {{ $category := . }}
+ {{ $funcs := slice }}
+ {{ range $k, $func := site.Data.docs.remap.functions }}
+ {{ if eq $func.category $category }}
+ {{ $funcs = $funcs | append $func }}
+ {{ end }}
+ {{ end }}
-{{ $text := printf "%s examples" . }}
-{{ partial "heading.html" (dict "text" $text "level" 2) }}
+ {{ $text := printf "%s examples" . }}
+ {{ partial "heading.html" (dict "text" $text "level" 2) }}
-{{ partial "data.html" (dict "vrl_examples" $funcs) }}
-{{ end }}
\ No newline at end of file
+ {{ partial "data.html" (dict "vrl_examples" $funcs) }}
+{{ end }}
diff --git a/website/layouts/shortcodes/vrl/features.html b/website/layouts/shortcodes/vrl/features.html
index a5449cb288af3..4320318f5b292 100644
--- a/website/layouts/shortcodes/vrl/features.html
+++ b/website/layouts/shortcodes/vrl/features.html
@@ -1,2 +1,2 @@
{{ $features := site.Data.docs.remap.features }}
-{{ partial "data.html" (dict "vrl_features" $features) }}
\ No newline at end of file
+{{ partial "data.html" (dict "vrl_features" $features) }}
diff --git a/website/layouts/shortcodes/vrl/functions.html b/website/layouts/shortcodes/vrl/functions.html
index d08c2487ce046..4b7c33c1b1788 100644
--- a/website/layouts/shortcodes/vrl/functions.html
+++ b/website/layouts/shortcodes/vrl/functions.html
@@ -1,16 +1,16 @@
{{ $categories := site.Data.docs.remap.function_categories }}
{{ range $categories }}
-{{ $category := . }}
-{{ $funcs := slice }}
-{{ range $k, $func := site.Data.docs.remap.functions }}
-{{ if eq $func.category $category }}
-{{ $funcs = $funcs | append $func }}
-{{ end }}
-{{ end }}
+ {{ $category := . }}
+ {{ $funcs := slice }}
+ {{ range $k, $func := site.Data.docs.remap.functions }}
+ {{ if eq $func.category $category }}
+ {{ $funcs = $funcs | append $func }}
+ {{ end }}
+ {{ end }}
-{{ $text := printf "%s functions" . }}
-{{ partial "heading.html" (dict "text" $text "level" 2) }}
+ {{ $text := printf "%s functions" . }}
+ {{ partial "heading.html" (dict "text" $text "level" 2) }}
-{{ partial "data.html" (dict "vrl_functions" $funcs) }}
-{{ end }}
\ No newline at end of file
+ {{ partial "data.html" (dict "vrl_functions" $funcs) }}
+{{ end }}
diff --git a/website/layouts/shortcodes/vrl/literal-expressions.html b/website/layouts/shortcodes/vrl/literal-expressions.html
index 88b4585ec7b70..6165ccf5aa5b4 100644
--- a/website/layouts/shortcodes/vrl/literal-expressions.html
+++ b/website/layouts/shortcodes/vrl/literal-expressions.html
@@ -1,2 +1,2 @@
{{ $literals := site.Data.docs.remap.literals }}
-{{ partial "data.html" (dict "vrl_literals" $literals) }}
\ No newline at end of file
+{{ partial "data.html" (dict "vrl_literals" $literals) }}
diff --git a/website/layouts/shortcodes/vrl/principles.html b/website/layouts/shortcodes/vrl/principles.html
index b3cff3f43d597..b319e012543ae 100644
--- a/website/layouts/shortcodes/vrl/principles.html
+++ b/website/layouts/shortcodes/vrl/principles.html
@@ -1,2 +1,2 @@
{{ $principles := site.Data.docs.remap.principles }}
-{{ partial "data.html" (dict "vrl_principles" $principles) }}
\ No newline at end of file
+{{ partial "data.html" (dict "vrl_principles" $principles) }}
diff --git a/website/layouts/shortcodes/vrl/real-world-examples.html b/website/layouts/shortcodes/vrl/real-world-examples.html
index ba206aa3c79ba..699b0e560b4a3 100644
--- a/website/layouts/shortcodes/vrl/real-world-examples.html
+++ b/website/layouts/shortcodes/vrl/real-world-examples.html
@@ -1,3 +1,3 @@
{{ $key := .Get 0 }}
{{ $examples := site.Data.docs.remap.examples }}
-{{ partial "data.html" (dict "vrl_real_world_examples" $examples) }}
\ No newline at end of file
+{{ partial "data.html" (dict "vrl_real_world_examples" $examples) }}
diff --git a/website/layouts/shortcodes/vrl/syntax.html b/website/layouts/shortcodes/vrl/syntax.html
index a9f2d11c691bf..0ef88d0361d36 100644
--- a/website/layouts/shortcodes/vrl/syntax.html
+++ b/website/layouts/shortcodes/vrl/syntax.html
@@ -1,2 +1,2 @@
{{ $syntax := site.Data.docs.remap.syntax }}
-{{ partial "data.html" (dict "vrl_syntax" $syntax) }}
\ No newline at end of file
+{{ partial "data.html" (dict "vrl_syntax" $syntax) }}
diff --git a/website/layouts/shortcodes/warning.html b/website/layouts/shortcodes/warning.html
index dc7aaaae63b83..3e3c2d4332259 100644
--- a/website/layouts/shortcodes/warning.html
+++ b/website/layouts/shortcodes/warning.html
@@ -1 +1 @@
-{{ partial "admonition.html" (dict "type" "warning" "icon" "exclamation-triangle" "content" .Inner "title" (.Get "title")) }}
\ No newline at end of file
+{{ partial "admonition.html" (dict "type" "warning" "icon" "exclamation-triangle" "content" .Inner "title" (.Get "title")) }}
diff --git a/website/layouts/support/section.html b/website/layouts/support/section.html
index 915d67f2e03f8..a933fe63395e0 100644
--- a/website/layouts/support/section.html
+++ b/website/layouts/support/section.html
@@ -1,20 +1,25 @@
{{ define "title" }}
-Support Services | {{ site.Title }}
+ Support Services |
+ {{ site.Title }}
{{ end }}
{{ define "main" }}
-{{ $form := .Params.marketo_form }}
+ {{ $form := .Params.marketo_form }}
-
+
+
- {{ partial "hero.html" . }}
+ {{ partial "hero.html" . }}
{{ partial "form-on-page.html" (dict "form" (dict "form_id" $form.form_id "form_title" $form.form_title
- "form_thankyou" $form.form_thankyou)) }}
+ "form_thankyou" $form.form_thankyou))
+ }}
+
- For general support questions or to join our Discord group please review our contact us and FAQ page.
+ For general support questions or to join our Discord group please review our
+ contact us and FAQ page.
-
-{{ end }}
\ No newline at end of file
+
+{{ end }}
diff --git a/website/package.json b/website/package.json
index 81b4c64bd624f..1f64703034e5b 100644
--- a/website/package.json
+++ b/website/package.json
@@ -6,7 +6,10 @@
"typesense-sync:preview": "NODE_ENV=preview ts-node scripts/typesense-sync.ts",
"typesense-sync:production": "NODE_ENV=production ts-node scripts/typesense-sync.ts",
"config-examples": "node scripts/create-config-examples.js",
- "lighthouse": "lighthouse --output html --output-path ./reports/lighthouse.html --view https://vector.dev"
+ "lighthouse": "lighthouse --output html --output-path ./reports/lighthouse.html --view https://vector.dev",
+ "format": "prettier --write .",
+ "format:check": "prettier --check .",
+ "format:html": "prettier --write \"layouts/**/*.html\""
},
"dependencies": {
"@algolia/autocomplete-js": "^1.2.1",
diff --git a/website/postcss.config.js b/website/postcss.config.js
index 96e73589f6611..8e1e38266d824 100644
--- a/website/postcss.config.js
+++ b/website/postcss.config.js
@@ -1,7 +1,7 @@
-import postcssImport from 'postcss-import';
-import tailwindCss from 'tailwindcss';
-import autoprefixer from 'autoprefixer';
-import purgecssPlugin from '@fullhuman/postcss-purgecss';
+import postcssImport from "postcss-import";
+import tailwindCss from "tailwindcss";
+import autoprefixer from "autoprefixer";
+import purgecssPlugin from "@fullhuman/postcss-purgecss";
// These are classes for things that are applied by JS, and thus missed by Hugo.
// See assets/js/*.js for places where this happens.
@@ -41,17 +41,17 @@ const safeClasses = {
"text-sm",
"w-2",
"w-3",
- ]
+ ],
};
const purgecss = purgecssPlugin({
- content: ['./hugo_stats.json'],
+ content: ["./hugo_stats.json"],
safelist: safeClasses,
defaultExtractor: (content) => {
const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];
const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || [];
return broadMatches.concat(innerMatches);
- }
+ },
});
export default {
@@ -59,6 +59,6 @@ export default {
postcssImport,
tailwindCss,
autoprefixer,
- ...(process.env.HUGO_ENVIRONMENT === 'production' ? [purgecss] : [])
- ]
-}
+ ...(process.env.HUGO_ENVIRONMENT === "production" ? [purgecss] : []),
+ ],
+};
diff --git a/website/scripts/create-config-examples.js b/website/scripts/create-config-examples.js
index b9096fd4d3b1d..69dc7de23e3c6 100755
--- a/website/scripts/create-config-examples.js
+++ b/website/scripts/create-config-examples.js
@@ -1,7 +1,7 @@
-import fs from 'fs';
-import chalk from 'chalk';
-import * as TOML from '@iarna/toml';
-import YAML from 'yaml';
+import fs from "fs";
+import chalk from "chalk";
+import * as TOML from "@iarna/toml";
+import YAML from "yaml";
const cueJsonOutput = "data/docs.json";
@@ -10,56 +10,54 @@ const getExampleValue = (param, deepFilter) => {
let value;
const getArrayValue = (obj) => {
- const enumVal = (obj.enum != null) ? [Object.keys(obj.enum)[0]] : null;
+ const enumVal = obj.enum != null ? [Object.keys(obj.enum)[0]] : null;
- const examplesVal = (obj.examples != null && obj.examples.length > 0) ? [obj.examples[0]] : null;
+ const examplesVal = obj.examples != null && obj.examples.length > 0 ? [obj.examples[0]] : null;
return obj.default || examplesVal || enumVal || null;
- }
+ };
const getValue = (obj) => {
- const enumVal = (obj.enum != null) ? Object.keys(obj.enum)[0] : null;
+ const enumVal = obj.enum != null ? Object.keys(obj.enum)[0] : null;
- const examplesVal = (obj.examples != null && obj.examples.length > 0) ? obj.examples[0] : null;
+ const examplesVal = obj.examples != null && obj.examples.length > 0 ? obj.examples[0] : null;
return obj.default || examplesVal || enumVal || null;
- }
+ };
- Object.keys(param.type).forEach(k => {
+ Object.keys(param.type).forEach((k) => {
const p = param.type[k];
- if (['array', 'object'].includes(k)) {
+ if (["array", "object"].includes(k)) {
const topType = k;
if (p.items && p.items.type) {
const typeInfo = p.items.type;
- Object.keys(typeInfo).forEach(k => {
- if (['array', 'object'].includes(k)) {
+ Object.keys(typeInfo).forEach((k) => {
+ if (["array", "object"].includes(k)) {
const subType = k;
const options = typeInfo[k].options;
var subObj = {};
- Object
- .keys(options)
- .filter(k => deepFilter(options[k]))
- .forEach(k => {
- Object.keys(options[k].type).forEach(key => {
+ Object.keys(options)
+ .filter((k) => deepFilter(options[k]))
+ .forEach((k) => {
+ Object.keys(options[k].type).forEach((key) => {
const deepTypeInfo = options[k].type[key];
- if (subType === 'array') {
+ if (subType === "array") {
subObj[k] = getArrayValue(deepTypeInfo);
} else {
subObj[k] = getValue(deepTypeInfo);
}
-
});
});
value = subObj;
} else {
- if (topType === 'array') {
+ if (topType === "array") {
value = getArrayValue(typeInfo[k]);
} else {
value = getValue(typeInfo[k]);
@@ -75,15 +73,14 @@ const getExampleValue = (param, deepFilter) => {
});
return value;
-}
+};
Object.makeExampleParams = (params, filter, deepFilter) => {
var obj = {};
- Object
- .keys(params)
- .filter(k => filter(params[k]))
- .forEach(k => {
+ Object.keys(params)
+ .filter((k) => filter(params[k]))
+ .forEach((k) => {
let value = getExampleValue(params[k], deepFilter);
if (value) {
obj[k] = value;
@@ -91,22 +88,22 @@ Object.makeExampleParams = (params, filter, deepFilter) => {
});
return obj;
-}
+};
// Convert object to TOML string
const toToml = (obj) => {
return TOML.stringify(obj);
-}
+};
// Convert object to YAML string
const toYaml = (obj) => {
return `${YAML.stringify(obj)}`;
-}
+};
// Convert object to JSON string (indented)
const toJson = (obj) => {
return JSON.stringify(obj, null, 2);
-}
+};
// Set the example value for a given config parameter
const setExampleValue = (exampleConfig, paramName, param) => {
@@ -125,7 +122,7 @@ const setExampleValue = (exampleConfig, paramName, param) => {
exampleConfig[paramName] = p.examples[0];
}
- if (['array', 'object'].includes(k)) {
+ if (["array", "object"].includes(k)) {
if (p.items) {
var obj = {};
@@ -157,7 +154,7 @@ const setExampleValue = (exampleConfig, paramName, param) => {
}
}
});
-}
+};
// Assemble the "minimal" params for an example config
const makeMinimalParams = (configuration) => {
@@ -175,7 +172,7 @@ const makeMinimalParams = (configuration) => {
}
return minimal;
-}
+};
// Assemble the "advanced" params for an example config
const makeAllParams = (configuration) => {
@@ -190,7 +187,7 @@ const makeAllParams = (configuration) => {
}
return optional;
-}
+};
// Convert the use case examples (`component.examples`) into multi-format
const makeUseCaseExamples = (component) => {
@@ -210,31 +207,31 @@ const makeUseCaseExamples = (component) => {
exampleConfig = {
[kindPlural]: {
[keyName]: {
- "type": component.type,
- inputs: ['my-source-or-transform-id'],
- ...extra
- }
- }
- }
+ type: component.type,
+ inputs: ["my-source-or-transform-id"],
+ ...extra,
+ },
+ },
+ };
} else {
exampleConfig = {
[kindPlural]: {
[keyName]: {
- "type": component.type,
- ...extra
- }
- }
- }
+ type: component.type,
+ ...extra,
+ },
+ },
+ };
}
// Strip the "log" or "metric" key in the example output
let output;
if (example.output) {
- if (example.output['log']) {
- output = example.output['log'];
- } else if (example.output['metric']) {
- output = example.output['metric'];
+ if (example.output["log"]) {
+ output = example.output["log"];
+ } else if (example.output["metric"]) {
+ output = example.output["metric"];
} else {
output = example.output;
}
@@ -252,7 +249,7 @@ const makeUseCaseExamples = (component) => {
},
input: example.input,
output: output,
- }
+ };
useCases.push(useCase);
});
@@ -261,12 +258,12 @@ const makeUseCaseExamples = (component) => {
} else {
return null;
}
-}
+};
const main = () => {
try {
const debug = process.env.DEBUG === "true" || false;
- const data = fs.readFileSync(cueJsonOutput, 'utf8');
+ const data = fs.readFileSync(cueJsonOutput, "utf8");
const docs = JSON.parse(data);
const components = docs.components;
@@ -285,13 +282,13 @@ const main = () => {
const minimalParams = Object.makeExampleParams(
configuration,
- p => p.required || p.minimal,
- p => p.required || p.minimal,
+ (p) => p.required || p.minimal,
+ (p) => p.required || p.minimal
);
const advancedParams = Object.makeExampleParams(
configuration,
- _ => true,
- p => p.required || p.minimal || p.relevant_when,
+ (_) => true,
+ (p) => p.required || p.minimal || p.relevant_when
);
const useCaseExamples = makeUseCaseExamples(component);
@@ -300,49 +297,49 @@ const main = () => {
let minimalExampleConfig, advancedExampleConfig;
// Sinks and transforms are treated differently because they need an `inputs` field
- if (['sinks', 'transforms'].includes(kind)) {
+ if (["sinks", "transforms"].includes(kind)) {
minimalExampleConfig = {
[kind]: {
[keyName]: {
- "type": componentType,
- inputs: ['my-source-or-transform-id'],
+ type: componentType,
+ inputs: ["my-source-or-transform-id"],
...minimalParams,
- }
- }
+ },
+ },
};
advancedExampleConfig = {
[kind]: {
[keyName]: {
- "type": componentType,
- inputs: ['my-source-or-transform-id'],
+ type: componentType,
+ inputs: ["my-source-or-transform-id"],
...advancedParams,
- }
- }
+ },
+ },
};
} else {
minimalExampleConfig = {
[kind]: {
[keyName]: {
- "type": componentType,
+ type: componentType,
...minimalParams,
- }
- }
+ },
+ },
};
advancedExampleConfig = {
[kind]: {
[keyName]: {
- "type": componentType,
+ type: componentType,
...advancedParams,
- }
- }
+ },
+ },
};
}
- docs['components'][kind][componentType]['examples'] = useCaseExamples;
+ docs["components"][kind][componentType]["examples"] = useCaseExamples;
- docs['components'][kind][componentType]['example_configs'] = {
+ docs["components"][kind][componentType]["example_configs"] = {
minimal: {
toml: toToml(minimalExampleConfig),
yaml: toYaml(minimalExampleConfig),
@@ -357,25 +354,23 @@ const main = () => {
}
}
-
// A debugging statement to make sure things are going basically as planned
if (debug) {
- console.log(docs['components']['sources']['syslog']['examples']);
+ console.log(docs["components"]["sources"]["syslog"]["examples"]);
}
-
console.log(chalk.green("Success. Finished generating examples for all components."));
console.log(chalk.blue(`Writing generated examples as JSON to ${cueJsonOutput}...`));
// Write back to the JSON file only when not in debug mode
if (!debug) {
- fs.writeFileSync(cueJsonOutput, JSON.stringify(docs), 'utf8');
+ fs.writeFileSync(cueJsonOutput, JSON.stringify(docs), "utf8");
}
console.log(chalk.green(`Success. Finished writing example configs to ${cueJsonOutput}.`));
} catch (err) {
console.error(err);
}
-}
+};
main();
diff --git a/website/scripts/typesense-index.ts b/website/scripts/typesense-index.ts
index a80f1f343166b..552fd7218ba7e 100644
--- a/website/scripts/typesense-index.ts
+++ b/website/scripts/typesense-index.ts
@@ -71,7 +71,7 @@ function getItemUrl(file: string, { level, domId }: Payload[0]) {
// Hash the file name to create a unique ID for the record using the same hash function as the one used in the synapse stream package.
function hashString(fileName: string) {
- return crypto.createHash('md5').update(fileName).digest('hex')
+ return crypto.createHash("md5").update(fileName).digest("hex");
}
async function indexHTMLFiles(
@@ -88,8 +88,8 @@ async function indexHTMLFiles(
const $ = cheerio.load(html);
const containers = $("#page-content");
const pageTitle = $("meta[name='algolia:title']").attr("content") || "";
- const pageTagsString = $("meta[name='keywords']").attr('content') || "";
- const pageTags: string[] = (pageTagsString === "") ? [] : pageTagsString.split(",");
+ const pageTagsString = $("meta[name='keywords']").attr("content") || "";
+ const pageTags: string[] = pageTagsString === "" ? [] : pageTagsString.split(",");
// @ts-ignore
$(".algolia-no-index").each((_, d) => $(d).remove());
@@ -144,7 +144,8 @@ async function indexHTMLFiles(
tags: pageTags,
content: "",
};
- } else if (item.level === 1) { // h1 logic
+ } else if (item.level === 1) {
+ // h1 logic
activeRecord.content += item.content;
} else if (item.level < activeRecord.level) {
algoliaRecords.push({ ...activeRecord });
@@ -162,7 +163,8 @@ async function indexHTMLFiles(
tags: pageTags,
content: "",
};
- } else { // h2-h6 logic
+ } else {
+ // h2-h6 logic
algoliaRecords.push({ ...activeRecord });
const hierarchySize = activeRecord.hierarchy.length;
@@ -185,7 +187,7 @@ async function indexHTMLFiles(
}
if (activeRecord) {
- algoliaRecords.push({ ...activeRecord })
+ algoliaRecords.push({ ...activeRecord });
}
for (const rec of algoliaRecords) {
@@ -207,9 +209,7 @@ async function indexHTMLFiles(
}
}
- console.log(
- chalk.green(`Success. Updated records for ${files.length} file(s).`)
- );
+ console.log(chalk.green(`Success. Updated records for ${files.length} file(s).`));
records.push(...algoliaRecords);
}
@@ -282,7 +282,7 @@ async function buildIndex() {
// We shouldn't index upgrade guides
if (section.name === "Vector highlights") {
- files = files.filter((path) => !path.includes("-upgrade-guide"))
+ files = files.filter((path) => !path.includes("-upgrade-guide"));
}
console.log(chalk.blue(`Indexing ${section.displayPath}...`));
diff --git a/website/scripts/typesense-sync.ts b/website/scripts/typesense-sync.ts
index fd08850d19e49..de01e1b82aece 100644
--- a/website/scripts/typesense-sync.ts
+++ b/website/scripts/typesense-sync.ts
@@ -1,19 +1,19 @@
-const { typesenseSync } = require('typesense-sync');
-const { saveSettings } = require('typesense-sync/settings');
-const tsConfig = require('../typesense.config.json');
+const { typesenseSync } = require("typesense-sync");
+const { saveSettings } = require("typesense-sync/settings");
+const tsConfig = require("../typesense.config.json");
const syncCollection = async () => {
- const promises: Promise
[] = []
+ const promises: Promise[] = [];
for (const collection of tsConfig.collections) {
- console.log(`Updating collection ${collection.name}`)
- promises.push(typesenseSync(collection.name, collection.file_path))
+ console.log(`Updating collection ${collection.name}`);
+ promises.push(typesenseSync(collection.name, collection.file_path));
}
- return await Promise.all(promises)
-}
+ return await Promise.all(promises);
+};
saveSettings()
.then(() => syncCollection())
- .then(() => console.log('Typesense sync completed'))
- .catch(error => console.log('An error occurred', error))
+ .then(() => console.log("Typesense sync completed"))
+ .catch((error) => console.log("An error occurred", error));
diff --git a/website/tailwind.config.cjs b/website/tailwind.config.cjs
index 4a81e622178c0..c269a6420cfb1 100644
--- a/website/tailwind.config.cjs
+++ b/website/tailwind.config.cjs
@@ -1,180 +1,180 @@
-const colors = require('tailwindcss/colors');
+const colors = require("tailwindcss/colors");
module.exports = {
purge: [],
presets: [],
- darkMode: 'class', // Toggle dark mode using Alpine JS (layouts/_default/baseof.html)
+ darkMode: "class", // Toggle dark mode using Alpine JS (layouts/_default/baseof.html)
theme: {
// Non-default theming
extend: {
backgroundImage: {
// Built in
- none: 'none',
- 'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
- 'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
- 'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
- 'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
- 'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
- 'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
- 'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
- 'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
+ none: "none",
+ "gradient-to-t": "linear-gradient(to top, var(--tw-gradient-stops))",
+ "gradient-to-tr": "linear-gradient(to top right, var(--tw-gradient-stops))",
+ "gradient-to-r": "linear-gradient(to right, var(--tw-gradient-stops))",
+ "gradient-to-br": "linear-gradient(to bottom right, var(--tw-gradient-stops))",
+ "gradient-to-b": "linear-gradient(to bottom, var(--tw-gradient-stops))",
+ "gradient-to-bl": "linear-gradient(to bottom left, var(--tw-gradient-stops))",
+ "gradient-to-l": "linear-gradient(to left, var(--tw-gradient-stops))",
+ "gradient-to-tl": "linear-gradient(to top left, var(--tw-gradient-stops))",
},
// Custom colors
colors: {
- 'inherit': 'inherit',
- 'dark': '#191927', // Vector dark
- 'primary': '#28d9f2', // Vector greenish blue
- 'primary-dark': '#00a9bc', // Vector darker greenish blue
- 'secondary': '#f44af5', // Vector magenta
- 'purple-v': '#98f', // Vector purple
+ inherit: "inherit",
+ dark: "#191927", // Vector dark
+ primary: "#28d9f2", // Vector greenish blue
+ "primary-dark": "#00a9bc", // Vector darker greenish blue
+ secondary: "#f44af5", // Vector magenta
+ "purple-v": "#98f", // Vector purple
// Brand colors
- 'twitter-blue': '#1DA1F2',
- 'discord-purple': '#7289DA',
- 'rss-orange': '#f26522'
+ "twitter-blue": "#1DA1F2",
+ "discord-purple": "#7289DA",
+ "rss-orange": "#f26522",
},
typography: (theme) => ({
DEFAULT: {
css: {
a: {
- color: theme('colors.primary-dark', 'currentColor'),
- '&:hover': {
- color: theme('colors.secondary'),
+ color: theme("colors.primary-dark", "currentColor"),
+ "&:hover": {
+ color: theme("colors.secondary"),
},
- 'text-decoration': 'none',
+ "text-decoration": "none",
code: {
- color: theme('colors.primary-dark'),
+ color: theme("colors.primary-dark"),
'&:not([class^="language-"])': {
- color: theme('colors.inherit')
+ color: theme("colors.inherit"),
},
},
},
code: {
- color: theme('colors.primary-dark', 'currentColor'),
+ color: theme("colors.primary-dark", "currentColor"),
'&:not([class^="language-"])': {
- color: theme('colors.dark', 'currentColor'),
- 'background-color': theme('colors.gray.100'),
- 'border-radius': '4px',
- padding: '0 5px',
- display: 'inline-flex',
- 'align-items': 'center'
+ color: theme("colors.dark", "currentColor"),
+ "background-color": theme("colors.gray.100"),
+ "border-radius": "4px",
+ padding: "0 5px",
+ display: "inline-flex",
+ "align-items": "center",
},
- '&::before': {
- display: 'none',
+ "&::before": {
+ display: "none",
},
- '&::after': {
- display: 'none',
+ "&::after": {
+ display: "none",
},
},
- 'a code': {
- 'color': 'inherit'
+ "a code": {
+ color: "inherit",
},
- 'ul > li >, ol > li >': {
- '*:first-child, *:last-child': {
- margin: 0
- }
+ "ul > li >, ol > li >": {
+ "*:first-child, *:last-child": {
+ margin: 0,
+ },
},
- 'ul > li::before': {
- 'background-color': theme('colors.gray.700'),
+ "ul > li::before": {
+ "background-color": theme("colors.gray.700"),
},
- 'ol > li::before': {
- color: theme('colors.gray.700'),
+ "ol > li::before": {
+ color: theme("colors.gray.700"),
},
// Spacing between certain shortcode combinations
- '.admonition + .tabs, .svg + .admonition, .highlight + p': {
- 'margin-top': '1rem',
+ ".admonition + .tabs, .svg + .admonition, .highlight + p": {
+ "margin-top": "1rem",
},
- '.no-prose': {
+ ".no-prose": {
a: {
- color: theme('colors.primary-dark', 'currentColor'),
- '&:hover': {
- color: theme('colors.secondary'),
+ color: theme("colors.primary-dark", "currentColor"),
+ "&:hover": {
+ color: theme("colors.secondary"),
},
},
- 'p + .highlight': {
- 'margin-top': '0.75rem',
+ "p + .highlight": {
+ "margin-top": "0.75rem",
},
- 'h1, h2, h3, h4, h5, h6': {
+ "h1, h2, h3, h4, h5, h6": {
margin: 0,
padding: 0,
},
- '.highlight, pre.chroma': {
+ ".highlight, pre.chroma": {
margin: 0,
},
},
- }
+ },
},
dark: {
css: {
- 'table th, table td': {
- color: theme('colors.gray.200'),
+ "table th, table td": {
+ color: theme("colors.gray.200"),
},
- 'table tr, table th, table thead, table tbody': {
- 'border-top-color': theme('colors.gray.700'),
- 'border-bottom-color': theme('colors.gray.700'),
+ "table tr, table th, table thead, table tbody": {
+ "border-top-color": theme("colors.gray.700"),
+ "border-bottom-color": theme("colors.gray.700"),
},
code: {
- color: theme('colors.gray.100', 'currentColor'),
+ color: theme("colors.gray.100", "currentColor"),
'&:not([class^="language-"])': {
- 'background-color': theme('colors.gray.700'),
- }
+ "background-color": theme("colors.gray.700"),
+ },
},
- color: theme('colors.gray.200'),
- 'p, h1, h2, h3, h4, h5, h6, li': {
- color: theme('colors.gray.100')
+ color: theme("colors.gray.200"),
+ "p, h1, h2, h3, h4, h5, h6, li": {
+ color: theme("colors.gray.100"),
},
- 'ul > li': {
- '&:before': {
- 'background-color': theme('colors.gray.100')
- }
+ "ul > li": {
+ "&:before": {
+ "background-color": theme("colors.gray.100"),
+ },
},
- 'ol > li': {
- '&:before': {
- color: theme('colors.gray.100')
- }
+ "ol > li": {
+ "&:before": {
+ color: theme("colors.gray.100"),
+ },
},
'a, a code, a code:not([class^="language-"])': {
- color: theme('colors.primary', 'currentColor'),
- 'text-decoration': 'none',
- '&:hover, &:active': {
- color: theme('colors.secondary'),
+ color: theme("colors.primary", "currentColor"),
+ "text-decoration": "none",
+ "&:hover, &:active": {
+ color: theme("colors.secondary"),
},
},
- 'a': {
- '&:hover': {
- 'code': {
+ a: {
+ "&:hover": {
+ code: {
'&:not([class^="language-"])': {
- color: theme('colors.inherit')
- }
- }
- }
+ color: theme("colors.inherit"),
+ },
+ },
+ },
},
strong: {
- color: theme('colors.gray.100'),
+ color: theme("colors.gray.100"),
},
- }
+ },
},
sm: {
css: {
- 'ul > li >, ol > li >': {
- '*:first-child, *:last-child': {
- margin: 0
- }
- }
- }
- }
+ "ul > li >, ol > li >": {
+ "*:first-child, *:last-child": {
+ margin: 0,
+ },
+ },
+ },
+ },
}),
},
screens: {
- sm: '640px',
- md: '768px',
- lg: '1024px',
- xl: '1280px',
- '2xl': '1536px',
+ sm: "640px",
+ md: "768px",
+ lg: "1024px",
+ xl: "1280px",
+ "2xl": "1536px",
},
colors: {
// Let's use the full color palette rather than the default (yawn)
- transparent: 'transparent',
- current: 'currentColor',
+ transparent: "transparent",
+ current: "currentColor",
white: colors.white,
black: colors.black,
@@ -202,944 +202,941 @@ module.exports = {
//rose: colors.rose,
},
spacing: {
- px: '1px',
- 0: '0px',
- 0.5: '0.125rem',
- 1: '0.25rem',
- 1.5: '0.375rem',
- 2: '0.5rem',
- 2.5: '0.625rem',
- 3: '0.75rem',
- 3.5: '0.875rem',
- 4: '1rem',
- 5: '1.25rem',
- 6: '1.5rem',
- 7: '1.75rem',
- 8: '2rem',
- 9: '2.25rem',
- 10: '2.5rem',
- 11: '2.75rem',
- 12: '3rem',
- 14: '3.5rem',
- 16: '4rem',
- 20: '5rem',
- 24: '6rem',
- 28: '7rem',
- 32: '8rem',
- 36: '9rem',
- 40: '10rem',
- 44: '11rem',
- 48: '12rem',
- 52: '13rem',
- 56: '14rem',
- 60: '15rem',
- 64: '16rem',
- 72: '18rem',
- 80: '20rem',
- 96: '24rem',
+ px: "1px",
+ 0: "0px",
+ 0.5: "0.125rem",
+ 1: "0.25rem",
+ 1.5: "0.375rem",
+ 2: "0.5rem",
+ 2.5: "0.625rem",
+ 3: "0.75rem",
+ 3.5: "0.875rem",
+ 4: "1rem",
+ 5: "1.25rem",
+ 6: "1.5rem",
+ 7: "1.75rem",
+ 8: "2rem",
+ 9: "2.25rem",
+ 10: "2.5rem",
+ 11: "2.75rem",
+ 12: "3rem",
+ 14: "3.5rem",
+ 16: "4rem",
+ 20: "5rem",
+ 24: "6rem",
+ 28: "7rem",
+ 32: "8rem",
+ 36: "9rem",
+ 40: "10rem",
+ 44: "11rem",
+ 48: "12rem",
+ 52: "13rem",
+ 56: "14rem",
+ 60: "15rem",
+ 64: "16rem",
+ 72: "18rem",
+ 80: "20rem",
+ 96: "24rem",
},
animation: {
- none: 'none',
- spin: 'spin 1s linear infinite',
- ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
- pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
- bounce: 'bounce 1s infinite',
+ none: "none",
+ spin: "spin 1s linear infinite",
+ ping: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
+ pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+ bounce: "bounce 1s infinite",
},
- backdropBlur: (theme) => theme('blur'),
- backdropBrightness: (theme) => theme('brightness'),
- backdropContrast: (theme) => theme('contrast'),
- backdropGrayscale: (theme) => theme('grayscale'),
- backdropHueRotate: (theme) => theme('hueRotate'),
- backdropInvert: (theme) => theme('invert'),
- backdropOpacity: (theme) => theme('opacity'),
- backdropSaturate: (theme) => theme('saturate'),
- backdropSepia: (theme) => theme('sepia'),
- backgroundColor: (theme) => theme('colors'),
- backgroundOpacity: (theme) => theme('opacity'),
+ backdropBlur: (theme) => theme("blur"),
+ backdropBrightness: (theme) => theme("brightness"),
+ backdropContrast: (theme) => theme("contrast"),
+ backdropGrayscale: (theme) => theme("grayscale"),
+ backdropHueRotate: (theme) => theme("hueRotate"),
+ backdropInvert: (theme) => theme("invert"),
+ backdropOpacity: (theme) => theme("opacity"),
+ backdropSaturate: (theme) => theme("saturate"),
+ backdropSepia: (theme) => theme("sepia"),
+ backgroundColor: (theme) => theme("colors"),
+ backgroundOpacity: (theme) => theme("opacity"),
backgroundPosition: {
- bottom: 'bottom',
- center: 'center',
- left: 'left',
- 'left-bottom': 'left bottom',
- 'left-top': 'left top',
- right: 'right',
- 'right-bottom': 'right bottom',
- 'right-top': 'right top',
- top: 'top',
+ bottom: "bottom",
+ center: "center",
+ left: "left",
+ "left-bottom": "left bottom",
+ "left-top": "left top",
+ right: "right",
+ "right-bottom": "right bottom",
+ "right-top": "right top",
+ top: "top",
},
backgroundSize: {
- auto: 'auto',
- cover: 'cover',
- contain: 'contain',
+ auto: "auto",
+ cover: "cover",
+ contain: "contain",
},
blur: {
- 0: '0',
- sm: '4px',
- DEFAULT: '8px',
- md: '12px',
- lg: '16px',
- xl: '24px',
- '2xl': '40px',
- '3xl': '64px',
+ 0: "0",
+ sm: "4px",
+ DEFAULT: "8px",
+ md: "12px",
+ lg: "16px",
+ xl: "24px",
+ "2xl": "40px",
+ "3xl": "64px",
},
brightness: {
- 0: '0',
- 50: '.5',
- 75: '.75',
- 90: '.9',
- 95: '.95',
- 100: '1',
- 105: '1.05',
- 110: '1.1',
- 125: '1.25',
- 150: '1.5',
- 200: '2',
+ 0: "0",
+ 50: ".5",
+ 75: ".75",
+ 90: ".9",
+ 95: ".95",
+ 100: "1",
+ 105: "1.05",
+ 110: "1.1",
+ 125: "1.25",
+ 150: "1.5",
+ 200: "2",
},
borderColor: (theme) => ({
- ...theme('colors'),
- DEFAULT: theme('colors.gray.200', 'currentColor'),
+ ...theme("colors"),
+ DEFAULT: theme("colors.gray.200", "currentColor"),
}),
- borderOpacity: (theme) => theme('opacity'),
+ borderOpacity: (theme) => theme("opacity"),
borderRadius: {
- none: '0px',
- sm: '0.125rem',
- DEFAULT: '0.25rem',
- md: '0.375rem',
- lg: '0.5rem',
- xl: '0.75rem',
- '2xl': '1rem',
- '3xl': '1.5rem',
- full: '9999px',
+ none: "0px",
+ sm: "0.125rem",
+ DEFAULT: "0.25rem",
+ md: "0.375rem",
+ lg: "0.5rem",
+ xl: "0.75rem",
+ "2xl": "1rem",
+ "3xl": "1.5rem",
+ full: "9999px",
},
borderWidth: {
- DEFAULT: '1px',
- 0: '0px',
- 1: '1px',
- 2: '2px',
- '2.5': '2.5px',
- 3: '3px',
- 4: '4px',
- 6: '6px',
- 8: '8px',
+ DEFAULT: "1px",
+ 0: "0px",
+ 1: "1px",
+ 2: "2px",
+ 2.5: "2.5px",
+ 3: "3px",
+ 4: "4px",
+ 6: "6px",
+ 8: "8px",
},
boxShadow: {
- sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
- DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
- md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
- lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
- xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
- '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
- inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
- none: 'none',
+ sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+ DEFAULT: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+ md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+ lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+ xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+ "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+ inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
+ none: "none",
},
contrast: {
- 0: '0',
- 50: '.5',
- 75: '.75',
- 100: '1',
- 125: '1.25',
- 150: '1.5',
- 200: '2',
+ 0: "0",
+ 50: ".5",
+ 75: ".75",
+ 100: "1",
+ 125: "1.25",
+ 150: "1.5",
+ 200: "2",
},
container: {},
cursor: {
- auto: 'auto',
- default: 'default',
- pointer: 'pointer',
- wait: 'wait',
- text: 'text',
- move: 'move',
- help: 'help',
- 'not-allowed': 'not-allowed',
+ auto: "auto",
+ default: "default",
+ pointer: "pointer",
+ wait: "wait",
+ text: "text",
+ move: "move",
+ help: "help",
+ "not-allowed": "not-allowed",
},
- divideColor: (theme) => theme('borderColor'),
- divideOpacity: (theme) => theme('borderOpacity'),
- divideWidth: (theme) => theme('borderWidth'),
+ divideColor: (theme) => theme("borderColor"),
+ divideOpacity: (theme) => theme("borderOpacity"),
+ divideWidth: (theme) => theme("borderWidth"),
dropShadow: {
- sm: '0 1px 1px rgba(0,0,0,0.05)',
- DEFAULT: ['0 1px 2px rgba(0, 0, 0, 0.1)', '0 1px 1px rgba(0, 0, 0, 0.06)'],
- md: ['0 4px 3px rgba(0, 0, 0, 0.07)', '0 2px 2px rgba(0, 0, 0, 0.06)'],
- lg: ['0 10px 8px rgba(0, 0, 0, 0.04)', '0 4px 3px rgba(0, 0, 0, 0.1)'],
- xl: ['0 20px 13px rgba(0, 0, 0, 0.03)', '0 8px 5px rgba(0, 0, 0, 0.08)'],
- '2xl': '0 25px 25px rgba(0, 0, 0, 0.15)',
- none: '0 0 #0000',
+ sm: "0 1px 1px rgba(0,0,0,0.05)",
+ DEFAULT: ["0 1px 2px rgba(0, 0, 0, 0.1)", "0 1px 1px rgba(0, 0, 0, 0.06)"],
+ md: ["0 4px 3px rgba(0, 0, 0, 0.07)", "0 2px 2px rgba(0, 0, 0, 0.06)"],
+ lg: ["0 10px 8px rgba(0, 0, 0, 0.04)", "0 4px 3px rgba(0, 0, 0, 0.1)"],
+ xl: ["0 20px 13px rgba(0, 0, 0, 0.03)", "0 8px 5px rgba(0, 0, 0, 0.08)"],
+ "2xl": "0 25px 25px rgba(0, 0, 0, 0.15)",
+ none: "0 0 #0000",
},
- fill: { current: 'currentColor' },
+ fill: { current: "currentColor" },
grayscale: {
- 0: '0',
- DEFAULT: '100%',
+ 0: "0",
+ DEFAULT: "100%",
},
hueRotate: {
- '-180': '-180deg',
- '-90': '-90deg',
- '-60': '-60deg',
- '-30': '-30deg',
- '-15': '-15deg',
- 0: '0deg',
- 15: '15deg',
- 30: '30deg',
- 60: '60deg',
- 90: '90deg',
- 180: '180deg',
+ "-180": "-180deg",
+ "-90": "-90deg",
+ "-60": "-60deg",
+ "-30": "-30deg",
+ "-15": "-15deg",
+ 0: "0deg",
+ 15: "15deg",
+ 30: "30deg",
+ 60: "60deg",
+ 90: "90deg",
+ 180: "180deg",
},
invert: {
- 0: '0',
- DEFAULT: '100%',
+ 0: "0",
+ DEFAULT: "100%",
},
flex: {
- 1: '1 1 0%',
- auto: '1 1 auto',
- initial: '0 1 auto',
- none: 'none',
+ 1: "1 1 0%",
+ auto: "1 1 auto",
+ initial: "0 1 auto",
+ none: "none",
},
flexGrow: {
- 0: '0',
- DEFAULT: '1',
+ 0: "0",
+ DEFAULT: "1",
},
flexShrink: {
- 0: '0',
- DEFAULT: '1',
+ 0: "0",
+ DEFAULT: "1",
},
fontFamily: {
sans: [
'"Segoe UI"', // Non-default primary sans font
- 'ui-sans-serif',
- 'system-ui',
- '-apple-system',
- 'BlinkMacSystemFont',
- 'Roboto',
+ "ui-sans-serif",
+ "system-ui",
+ "-apple-system",
+ "BlinkMacSystemFont",
+ "Roboto",
'"Helvetica Neue"',
- 'Arial',
+ "Arial",
'"Noto Sans"',
- 'sans-serif',
+ "sans-serif",
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
- serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
+ serif: ["ui-serif", "Georgia", "Cambria", '"Times New Roman"', "Times", "serif"],
mono: [
- 'ui-monospace',
- 'SFMono-Regular',
- 'Menlo',
- 'Monaco',
- 'Consolas',
+ "ui-monospace",
+ "SFMono-Regular",
+ "Menlo",
+ "Monaco",
+ "Consolas",
'"Liberation Mono"',
'"Courier New"',
- 'monospace',
+ "monospace",
],
},
fontSize: {
- xs: ['0.75rem', { lineHeight: '1rem' }],
- sm: ['0.875rem', { lineHeight: '1.25rem' }],
- base: ['1rem', { lineHeight: '1.5rem' }],
- lg: ['1.125rem', { lineHeight: '1.75rem' }],
- xl: ['1.25rem', { lineHeight: '1.75rem' }],
- '2xl': ['1.5rem', { lineHeight: '2rem' }],
- '2.5xl': ['1.75rem', { lineHeight: '2.15rem' }],
- '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
- '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
- '4.5xl': ['2.5rem', { lineHeight: '2.75rem' }], // custom
- '5xl': ['3rem', { lineHeight: '1' }],
- '5.5xl': ['3.375rem', {lineHeight: '1'}], // custom
- '6xl': ['3.75rem', { lineHeight: '1' }],
- '7xl': ['4.5rem', { lineHeight: '1' }],
- '8xl': ['6rem', { lineHeight: '1' }],
- '9xl': ['8rem', { lineHeight: '1' }],
+ xs: ["0.75rem", { lineHeight: "1rem" }],
+ sm: ["0.875rem", { lineHeight: "1.25rem" }],
+ base: ["1rem", { lineHeight: "1.5rem" }],
+ lg: ["1.125rem", { lineHeight: "1.75rem" }],
+ xl: ["1.25rem", { lineHeight: "1.75rem" }],
+ "2xl": ["1.5rem", { lineHeight: "2rem" }],
+ "2.5xl": ["1.75rem", { lineHeight: "2.15rem" }],
+ "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
+ "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
+ "4.5xl": ["2.5rem", { lineHeight: "2.75rem" }], // custom
+ "5xl": ["3rem", { lineHeight: "1" }],
+ "5.5xl": ["3.375rem", { lineHeight: "1" }], // custom
+ "6xl": ["3.75rem", { lineHeight: "1" }],
+ "7xl": ["4.5rem", { lineHeight: "1" }],
+ "8xl": ["6rem", { lineHeight: "1" }],
+ "9xl": ["8rem", { lineHeight: "1" }],
},
fontWeight: {
- thin: '100',
- extralight: '200',
- light: '300',
- normal: '400',
- medium: '500',
- semibold: '600',
- bold: '700',
- extrabold: '800',
- black: '900',
+ thin: "100",
+ extralight: "200",
+ light: "300",
+ normal: "400",
+ medium: "500",
+ semibold: "600",
+ bold: "700",
+ extrabold: "800",
+ black: "900",
},
- gap: (theme) => theme('spacing'),
- gradientColorStops: (theme) => theme('colors'),
+ gap: (theme) => theme("spacing"),
+ gradientColorStops: (theme) => theme("colors"),
gridAutoColumns: {
- auto: 'auto',
- min: 'min-content',
- max: 'max-content',
- fr: 'minmax(0, 1fr)',
+ auto: "auto",
+ min: "min-content",
+ max: "max-content",
+ fr: "minmax(0, 1fr)",
},
gridAutoRows: {
- auto: 'auto',
- min: 'min-content',
- max: 'max-content',
- fr: 'minmax(0, 1fr)',
+ auto: "auto",
+ min: "min-content",
+ max: "max-content",
+ fr: "minmax(0, 1fr)",
},
gridColumn: {
- auto: 'auto',
- 'span-1': 'span 1 / span 1',
- 'span-2': 'span 2 / span 2',
- 'span-3': 'span 3 / span 3',
- 'span-4': 'span 4 / span 4',
- 'span-5': 'span 5 / span 5',
- 'span-6': 'span 6 / span 6',
- 'span-7': 'span 7 / span 7',
- 'span-8': 'span 8 / span 8',
- 'span-9': 'span 9 / span 9',
- 'span-10': 'span 10 / span 10',
- 'span-11': 'span 11 / span 11',
- 'span-12': 'span 12 / span 12',
- 'span-full': '1 / -1',
+ auto: "auto",
+ "span-1": "span 1 / span 1",
+ "span-2": "span 2 / span 2",
+ "span-3": "span 3 / span 3",
+ "span-4": "span 4 / span 4",
+ "span-5": "span 5 / span 5",
+ "span-6": "span 6 / span 6",
+ "span-7": "span 7 / span 7",
+ "span-8": "span 8 / span 8",
+ "span-9": "span 9 / span 9",
+ "span-10": "span 10 / span 10",
+ "span-11": "span 11 / span 11",
+ "span-12": "span 12 / span 12",
+ "span-full": "1 / -1",
},
gridColumnEnd: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- 8: '8',
- 9: '9',
- 10: '10',
- 11: '11',
- 12: '12',
- 13: '13',
+ auto: "auto",
+ 1: "1",
+ 2: "2",
+ 3: "3",
+ 4: "4",
+ 5: "5",
+ 6: "6",
+ 7: "7",
+ 8: "8",
+ 9: "9",
+ 10: "10",
+ 11: "11",
+ 12: "12",
+ 13: "13",
},
gridColumnStart: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- 8: '8',
- 9: '9',
- 10: '10',
- 11: '11',
- 12: '12',
- 13: '13',
+ auto: "auto",
+ 1: "1",
+ 2: "2",
+ 3: "3",
+ 4: "4",
+ 5: "5",
+ 6: "6",
+ 7: "7",
+ 8: "8",
+ 9: "9",
+ 10: "10",
+ 11: "11",
+ 12: "12",
+ 13: "13",
},
gridRow: {
- auto: 'auto',
- 'span-1': 'span 1 / span 1',
- 'span-2': 'span 2 / span 2',
- 'span-3': 'span 3 / span 3',
- 'span-4': 'span 4 / span 4',
- 'span-5': 'span 5 / span 5',
- 'span-6': 'span 6 / span 6',
- 'span-full': '1 / -1',
+ auto: "auto",
+ "span-1": "span 1 / span 1",
+ "span-2": "span 2 / span 2",
+ "span-3": "span 3 / span 3",
+ "span-4": "span 4 / span 4",
+ "span-5": "span 5 / span 5",
+ "span-6": "span 6 / span 6",
+ "span-full": "1 / -1",
},
gridRowStart: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
+ auto: "auto",
+ 1: "1",
+ 2: "2",
+ 3: "3",
+ 4: "4",
+ 5: "5",
+ 6: "6",
+ 7: "7",
},
gridRowEnd: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
+ auto: "auto",
+ 1: "1",
+ 2: "2",
+ 3: "3",
+ 4: "4",
+ 5: "5",
+ 6: "6",
+ 7: "7",
},
gridTemplateColumns: {
- none: 'none',
- 1: 'repeat(1, minmax(0, 1fr))',
- 2: 'repeat(2, minmax(0, 1fr))',
- 3: 'repeat(3, minmax(0, 1fr))',
- 4: 'repeat(4, minmax(0, 1fr))',
- 5: 'repeat(5, minmax(0, 1fr))',
- 6: 'repeat(6, minmax(0, 1fr))',
- 7: 'repeat(7, minmax(0, 1fr))',
- 8: 'repeat(8, minmax(0, 1fr))',
- 9: 'repeat(9, minmax(0, 1fr))',
- 10: 'repeat(10, minmax(0, 1fr))',
- 11: 'repeat(11, minmax(0, 1fr))',
- 12: 'repeat(12, minmax(0, 1fr))',
- 16: 'repeat(16, minmax(0, 1fr))', // Custom
+ none: "none",
+ 1: "repeat(1, minmax(0, 1fr))",
+ 2: "repeat(2, minmax(0, 1fr))",
+ 3: "repeat(3, minmax(0, 1fr))",
+ 4: "repeat(4, minmax(0, 1fr))",
+ 5: "repeat(5, minmax(0, 1fr))",
+ 6: "repeat(6, minmax(0, 1fr))",
+ 7: "repeat(7, minmax(0, 1fr))",
+ 8: "repeat(8, minmax(0, 1fr))",
+ 9: "repeat(9, minmax(0, 1fr))",
+ 10: "repeat(10, minmax(0, 1fr))",
+ 11: "repeat(11, minmax(0, 1fr))",
+ 12: "repeat(12, minmax(0, 1fr))",
+ 16: "repeat(16, minmax(0, 1fr))", // Custom
},
gridTemplateRows: {
- none: 'none',
- 1: 'repeat(1, minmax(0, 1fr))',
- 2: 'repeat(2, minmax(0, 1fr))',
- 3: 'repeat(3, minmax(0, 1fr))',
- 4: 'repeat(4, minmax(0, 1fr))',
- 5: 'repeat(5, minmax(0, 1fr))',
- 6: 'repeat(6, minmax(0, 1fr))',
+ none: "none",
+ 1: "repeat(1, minmax(0, 1fr))",
+ 2: "repeat(2, minmax(0, 1fr))",
+ 3: "repeat(3, minmax(0, 1fr))",
+ 4: "repeat(4, minmax(0, 1fr))",
+ 5: "repeat(5, minmax(0, 1fr))",
+ 6: "repeat(6, minmax(0, 1fr))",
},
height: (theme) => ({
- auto: 'auto',
- ...theme('spacing'),
- '1/2': '50%',
- '1/3': '33.333333%',
- '2/3': '66.666667%',
- '1/4': '25%',
- '2/4': '50%',
- '3/4': '75%',
- '1/5': '20%',
- '2/5': '40%',
- '3/5': '60%',
- '4/5': '80%',
- '1/6': '16.666667%',
- '2/6': '33.333333%',
- '3/6': '50%',
- '4/6': '66.666667%',
- '5/6': '83.333333%',
- full: '100%',
- screen: '100vh',
+ auto: "auto",
+ ...theme("spacing"),
+ "1/2": "50%",
+ "1/3": "33.333333%",
+ "2/3": "66.666667%",
+ "1/4": "25%",
+ "2/4": "50%",
+ "3/4": "75%",
+ "1/5": "20%",
+ "2/5": "40%",
+ "3/5": "60%",
+ "4/5": "80%",
+ "1/6": "16.666667%",
+ "2/6": "33.333333%",
+ "3/6": "50%",
+ "4/6": "66.666667%",
+ "5/6": "83.333333%",
+ full: "100%",
+ screen: "100vh",
}),
inset: (theme, { negative }) => ({
- auto: 'auto',
- ...theme('spacing'),
- ...negative(theme('spacing')),
- '1/2': '50%',
- '1/3': '33.333333%',
- '2/3': '66.666667%',
- '1/4': '25%',
- '2/4': '50%',
- '3/4': '75%',
- full: '100%',
- '-1/2': '-50%',
- '-1/3': '-33.333333%',
- '-2/3': '-66.666667%',
- '-1/4': '-25%',
- '-2/4': '-50%',
- '-3/4': '-75%',
- '-full': '-100%',
+ auto: "auto",
+ ...theme("spacing"),
+ ...negative(theme("spacing")),
+ "1/2": "50%",
+ "1/3": "33.333333%",
+ "2/3": "66.666667%",
+ "1/4": "25%",
+ "2/4": "50%",
+ "3/4": "75%",
+ full: "100%",
+ "-1/2": "-50%",
+ "-1/3": "-33.333333%",
+ "-2/3": "-66.666667%",
+ "-1/4": "-25%",
+ "-2/4": "-50%",
+ "-3/4": "-75%",
+ "-full": "-100%",
}),
keyframes: {
spin: {
to: {
- transform: 'rotate(360deg)',
+ transform: "rotate(360deg)",
},
},
ping: {
- '75%, 100%': {
- transform: 'scale(2)',
- opacity: '0',
+ "75%, 100%": {
+ transform: "scale(2)",
+ opacity: "0",
},
},
pulse: {
- '50%': {
- opacity: '.5',
+ "50%": {
+ opacity: ".5",
},
},
bounce: {
- '0%, 100%': {
- transform: 'translateY(-25%)',
- animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
+ "0%, 100%": {
+ transform: "translateY(-25%)",
+ animationTimingFunction: "cubic-bezier(0.8,0,1,1)",
},
- '50%': {
- transform: 'none',
- animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
+ "50%": {
+ transform: "none",
+ animationTimingFunction: "cubic-bezier(0,0,0.2,1)",
},
},
},
letterSpacing: {
- tighter: '-0.05em',
- tight: '-0.025em',
- normal: '0em',
- wide: '0.025em',
- wider: '0.05em',
- widest: '0.1em',
+ tighter: "-0.05em",
+ tight: "-0.025em",
+ normal: "0em",
+ wide: "0.025em",
+ wider: "0.05em",
+ widest: "0.1em",
},
lineHeight: {
- none: '1',
- tight: '1.25',
- snug: '1.375',
- normal: '1.5',
- relaxed: '1.625',
- loose: '2',
- 3: '.75rem',
- 4: '1rem',
- 5: '1.25rem',
- 6: '1.5rem',
- 7: '1.75rem',
- 8: '2rem',
- 9: '2.25rem',
- 10: '2.5rem',
+ none: "1",
+ tight: "1.25",
+ snug: "1.375",
+ normal: "1.5",
+ relaxed: "1.625",
+ loose: "2",
+ 3: ".75rem",
+ 4: "1rem",
+ 5: "1.25rem",
+ 6: "1.5rem",
+ 7: "1.75rem",
+ 8: "2rem",
+ 9: "2.25rem",
+ 10: "2.5rem",
},
listStyleType: {
- none: 'none',
- disc: 'disc',
- decimal: 'decimal',
+ none: "none",
+ disc: "disc",
+ decimal: "decimal",
},
margin: (theme, { negative }) => ({
- auto: 'auto',
- '1/2': '50%',
- ...theme('spacing'),
- ...negative(theme('spacing')),
+ auto: "auto",
+ "1/2": "50%",
+ ...theme("spacing"),
+ ...negative(theme("spacing")),
}),
maxHeight: (theme) => ({
- ...theme('spacing'),
- full: '100%',
- screen: '100vh',
+ ...theme("spacing"),
+ full: "100%",
+ screen: "100vh",
}),
maxWidth: (theme, { breakpoints }) => ({
- none: 'none',
- 0: '0rem',
- xxs: '16rem',
- xs: '20rem',
- sm: '24rem',
- md: '28rem',
- lg: '32rem',
- xl: '36rem',
- '2xl': '42rem',
- '3xl': '48rem',
- '4xl': '56rem',
- '5xl': '64rem',
- '6xl': '72rem',
- '7xl': '80rem',
- 'prose': '80ch',
- '1/4': '25%',
- full: '100%',
- min: 'min-content',
- max: 'max-content',
- ...breakpoints(theme('screens')),
+ none: "none",
+ 0: "0rem",
+ xxs: "16rem",
+ xs: "20rem",
+ sm: "24rem",
+ md: "28rem",
+ lg: "32rem",
+ xl: "36rem",
+ "2xl": "42rem",
+ "3xl": "48rem",
+ "4xl": "56rem",
+ "5xl": "64rem",
+ "6xl": "72rem",
+ "7xl": "80rem",
+ prose: "80ch",
+ "1/4": "25%",
+ full: "100%",
+ min: "min-content",
+ max: "max-content",
+ ...breakpoints(theme("screens")),
}),
minHeight: {
- 0: '0px',
- full: '100%',
- screen: '100vh',
+ 0: "0px",
+ full: "100%",
+ screen: "100vh",
},
minWidth: {
- 0: '0px',
- full: '100%',
- min: 'min-content',
- max: 'max-content',
+ 0: "0px",
+ full: "100%",
+ min: "min-content",
+ max: "max-content",
},
objectPosition: {
- bottom: 'bottom',
- center: 'center',
- left: 'left',
- 'left-bottom': 'left bottom',
- 'left-top': 'left top',
- right: 'right',
- 'right-bottom': 'right bottom',
- 'right-top': 'right top',
- top: 'top',
+ bottom: "bottom",
+ center: "center",
+ left: "left",
+ "left-bottom": "left bottom",
+ "left-top": "left top",
+ right: "right",
+ "right-bottom": "right bottom",
+ "right-top": "right top",
+ top: "top",
},
opacity: {
- 0: '0',
- 5: '0.05',
- 10: '0.1',
- 20: '0.2',
- 25: '0.25',
- 30: '0.3',
- 40: '0.4',
- 50: '0.5',
- 60: '0.6',
- 70: '0.7',
- 75: '0.75',
- 80: '0.8',
- 90: '0.9',
- 95: '0.95',
- 100: '1',
+ 0: "0",
+ 5: "0.05",
+ 10: "0.1",
+ 20: "0.2",
+ 25: "0.25",
+ 30: "0.3",
+ 40: "0.4",
+ 50: "0.5",
+ 60: "0.6",
+ 70: "0.7",
+ 75: "0.75",
+ 80: "0.8",
+ 90: "0.9",
+ 95: "0.95",
+ 100: "1",
},
order: {
- first: '-9999',
- last: '9999',
- none: '0',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- 8: '8',
- 9: '9',
- 10: '10',
- 11: '11',
- 12: '12',
+ first: "-9999",
+ last: "9999",
+ none: "0",
+ 1: "1",
+ 2: "2",
+ 3: "3",
+ 4: "4",
+ 5: "5",
+ 6: "6",
+ 7: "7",
+ 8: "8",
+ 9: "9",
+ 10: "10",
+ 11: "11",
+ 12: "12",
},
outline: {
- none: ['2px solid transparent', '2px'],
- white: ['2px dotted white', '2px'],
- black: ['2px dotted black', '2px'],
+ none: ["2px solid transparent", "2px"],
+ white: ["2px dotted white", "2px"],
+ black: ["2px dotted black", "2px"],
},
- padding: (theme) => theme('spacing'),
- placeholderColor: (theme) => theme('colors'),
- placeholderOpacity: (theme) => theme('opacity'),
+ padding: (theme) => theme("spacing"),
+ placeholderColor: (theme) => theme("colors"),
+ placeholderOpacity: (theme) => theme("opacity"),
ringColor: (theme) => ({
- DEFAULT: theme('colors.blue.500', '#3b82f6'),
- ...theme('colors'),
+ DEFAULT: theme("colors.blue.500", "#3b82f6"),
+ ...theme("colors"),
}),
- ringOffsetColor: (theme) => theme('colors'),
+ ringOffsetColor: (theme) => theme("colors"),
ringOffsetWidth: {
- 0: '0px',
- 1: '1px',
- 2: '2px',
- 4: '4px',
- 8: '8px',
+ 0: "0px",
+ 1: "1px",
+ 2: "2px",
+ 4: "4px",
+ 8: "8px",
},
ringOpacity: (theme) => ({
- DEFAULT: '0.5',
- ...theme('opacity'),
+ DEFAULT: "0.5",
+ ...theme("opacity"),
}),
ringWidth: {
- DEFAULT: '3px',
- 0: '0px',
- 1: '1px',
- 2: '2px',
- 4: '4px',
- 8: '8px',
+ DEFAULT: "3px",
+ 0: "0px",
+ 1: "1px",
+ 2: "2px",
+ 4: "4px",
+ 8: "8px",
},
rotate: {
- '-180': '-180deg',
- '-90': '-90deg',
- '-45': '-45deg',
- '-12': '-12deg',
- '-6': '-6deg',
- '-3': '-3deg',
- '-2': '-2deg',
- '-1': '-1deg',
- 0: '0deg',
- 1: '1deg',
- 2: '2deg',
- 3: '3deg',
- 6: '6deg',
- 12: '12deg',
- 45: '45deg',
- 90: '90deg',
- 180: '180deg',
+ "-180": "-180deg",
+ "-90": "-90deg",
+ "-45": "-45deg",
+ "-12": "-12deg",
+ "-6": "-6deg",
+ "-3": "-3deg",
+ "-2": "-2deg",
+ "-1": "-1deg",
+ 0: "0deg",
+ 1: "1deg",
+ 2: "2deg",
+ 3: "3deg",
+ 6: "6deg",
+ 12: "12deg",
+ 45: "45deg",
+ 90: "90deg",
+ 180: "180deg",
},
saturate: {
- 0: '0',
- 50: '.5',
- 100: '1',
- 150: '1.5',
- 200: '2',
+ 0: "0",
+ 50: ".5",
+ 100: "1",
+ 150: "1.5",
+ 200: "2",
},
scale: {
- 0: '0',
- 50: '.5',
- 75: '.75',
- 90: '.9',
- 95: '.95',
- 100: '1',
- 105: '1.05',
- 110: '1.1',
- 125: '1.25',
- 150: '1.5',
+ 0: "0",
+ 50: ".5",
+ 75: ".75",
+ 90: ".9",
+ 95: ".95",
+ 100: "1",
+ 105: "1.05",
+ 110: "1.1",
+ 125: "1.25",
+ 150: "1.5",
},
sepia: {
- 0: '0',
- DEFAULT: '100%',
+ 0: "0",
+ DEFAULT: "100%",
},
skew: {
- '-12': '-12deg',
- '-6': '-6deg',
- '-3': '-3deg',
- '-2': '-2deg',
- '-1': '-1deg',
- 0: '0deg',
- 1: '1deg',
- 2: '2deg',
- 3: '3deg',
- 6: '6deg',
- 12: '12deg',
+ "-12": "-12deg",
+ "-6": "-6deg",
+ "-3": "-3deg",
+ "-2": "-2deg",
+ "-1": "-1deg",
+ 0: "0deg",
+ 1: "1deg",
+ 2: "2deg",
+ 3: "3deg",
+ 6: "6deg",
+ 12: "12deg",
},
space: (theme, { negative }) => ({
- ...theme('spacing'),
- ...negative(theme('spacing')),
+ ...theme("spacing"),
+ ...negative(theme("spacing")),
}),
stroke: {
- current: 'currentColor',
+ current: "currentColor",
},
strokeWidth: {
- 0: '0',
- 1: '1',
- 2: '2',
+ 0: "0",
+ 1: "1",
+ 2: "2",
},
- textColor: (theme) => theme('colors'),
- textOpacity: (theme) => theme('opacity'),
+ textColor: (theme) => theme("colors"),
+ textOpacity: (theme) => theme("opacity"),
transformOrigin: {
- center: 'center',
- top: 'top',
- 'top-right': 'top right',
- right: 'right',
- 'bottom-right': 'bottom right',
- bottom: 'bottom',
- 'bottom-left': 'bottom left',
- left: 'left',
- 'top-left': 'top left',
+ center: "center",
+ top: "top",
+ "top-right": "top right",
+ right: "right",
+ "bottom-right": "bottom right",
+ bottom: "bottom",
+ "bottom-left": "bottom left",
+ left: "left",
+ "top-left": "top left",
},
transitionDelay: {
- 75: '75ms',
- 100: '100ms',
- 150: '150ms',
- 200: '200ms',
- 300: '300ms',
- 500: '500ms',
- 700: '700ms',
- 1000: '1000ms',
+ 75: "75ms",
+ 100: "100ms",
+ 150: "150ms",
+ 200: "200ms",
+ 300: "300ms",
+ 500: "500ms",
+ 700: "700ms",
+ 1000: "1000ms",
},
transitionDuration: {
- DEFAULT: '150ms',
- 75: '75ms',
- 100: '100ms',
- 150: '150ms',
- 200: '200ms',
- 300: '300ms',
- 500: '500ms',
- 700: '700ms',
- 1000: '1000ms',
+ DEFAULT: "150ms",
+ 75: "75ms",
+ 100: "100ms",
+ 150: "150ms",
+ 200: "200ms",
+ 300: "300ms",
+ 500: "500ms",
+ 700: "700ms",
+ 1000: "1000ms",
},
transitionProperty: {
- none: 'none',
- all: 'all',
+ none: "none",
+ all: "all",
DEFAULT:
- 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
- colors: 'background-color, border-color, color, fill, stroke',
- opacity: 'opacity',
- shadow: 'box-shadow',
- transform: 'transform',
+ "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
+ colors: "background-color, border-color, color, fill, stroke",
+ opacity: "opacity",
+ shadow: "box-shadow",
+ transform: "transform",
},
transitionTimingFunction: {
- DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
- linear: 'linear',
- in: 'cubic-bezier(0.4, 0, 1, 1)',
- out: 'cubic-bezier(0, 0, 0.2, 1)',
- 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+ DEFAULT: "cubic-bezier(0.4, 0, 0.2, 1)",
+ linear: "linear",
+ in: "cubic-bezier(0.4, 0, 1, 1)",
+ out: "cubic-bezier(0, 0, 0.2, 1)",
+ "in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
},
translate: (theme, { negative }) => ({
- ...theme('spacing'),
- ...negative(theme('spacing')),
- '1/2': '50%',
- '1/3': '33.333333%',
- '2/3': '66.666667%',
- '1/4': '25%',
- '2/4': '50%',
- '3/4': '75%',
- full: '100%',
- '-1/2': '-50%',
- '-1/3': '-33.333333%',
- '-2/3': '-66.666667%',
- '-1/4': '-25%',
- '-2/4': '-50%',
- '-3/4': '-75%',
- '-full': '-100%',
+ ...theme("spacing"),
+ ...negative(theme("spacing")),
+ "1/2": "50%",
+ "1/3": "33.333333%",
+ "2/3": "66.666667%",
+ "1/4": "25%",
+ "2/4": "50%",
+ "3/4": "75%",
+ full: "100%",
+ "-1/2": "-50%",
+ "-1/3": "-33.333333%",
+ "-2/3": "-66.666667%",
+ "-1/4": "-25%",
+ "-2/4": "-50%",
+ "-3/4": "-75%",
+ "-full": "-100%",
}),
width: (theme) => ({
- auto: 'auto',
- ...theme('spacing'),
- '1/2': '50%',
- '1/3': '33.333333%',
- '2/3': '66.666667%',
- '1/4': '25%',
- '2/4': '50%',
- '3/4': '75%',
- '1/5': '20%',
- '2/5': '40%',
- '3/5': '60%',
- '4/5': '80%',
- '1/6': '16.666667%',
- '2/6': '33.333333%',
- '3/6': '50%',
- '4/6': '66.666667%',
- '5/6': '83.333333%',
- '1/12': '8.333333%',
- '2/12': '16.666667%',
- '3/12': '25%',
- '4/12': '33.333333%',
- '5/12': '41.666667%',
- '6/12': '50%',
- '7/12': '58.333333%',
- '8/12': '66.666667%',
- '9/12': '75%',
- '10/12': '83.333333%',
- '11/12': '91.666667%',
- full: '100%',
- screen: '100vw',
- min: 'min-content',
- max: 'max-content',
+ auto: "auto",
+ ...theme("spacing"),
+ "1/2": "50%",
+ "1/3": "33.333333%",
+ "2/3": "66.666667%",
+ "1/4": "25%",
+ "2/4": "50%",
+ "3/4": "75%",
+ "1/5": "20%",
+ "2/5": "40%",
+ "3/5": "60%",
+ "4/5": "80%",
+ "1/6": "16.666667%",
+ "2/6": "33.333333%",
+ "3/6": "50%",
+ "4/6": "66.666667%",
+ "5/6": "83.333333%",
+ "1/12": "8.333333%",
+ "2/12": "16.666667%",
+ "3/12": "25%",
+ "4/12": "33.333333%",
+ "5/12": "41.666667%",
+ "6/12": "50%",
+ "7/12": "58.333333%",
+ "8/12": "66.666667%",
+ "9/12": "75%",
+ "10/12": "83.333333%",
+ "11/12": "91.666667%",
+ full: "100%",
+ screen: "100vw",
+ min: "min-content",
+ max: "max-content",
}),
zIndex: {
- auto: 'auto',
- 0: '0',
- 10: '10',
- 20: '20',
- 30: '30',
- 40: '40',
- 50: '50',
+ auto: "auto",
+ 0: "0",
+ 10: "10",
+ 20: "20",
+ 30: "30",
+ 40: "40",
+ 50: "50",
},
},
variantOrder: [
- 'first',
- 'last',
- 'odd',
- 'even',
- 'visited',
- 'checked',
- 'group-hover',
- 'group-focus',
- 'focus-within',
- 'hover',
- 'focus',
- 'focus-visible',
- 'active',
- 'disabled',
+ "first",
+ "last",
+ "odd",
+ "even",
+ "visited",
+ "checked",
+ "group-hover",
+ "group-focus",
+ "focus-within",
+ "hover",
+ "focus",
+ "focus-visible",
+ "active",
+ "disabled",
],
variants: {
- accessibility: ['responsive', 'focus-within', 'focus'],
- alignContent: ['responsive'],
- alignItems: ['responsive'],
- alignSelf: ['responsive'],
- animation: ['responsive'],
- appearance: ['responsive'],
- backdropBlur: ['responsive'],
- backdropBrightness: ['responsive'],
- backdropContrast: ['responsive'],
- backdropDropShadow: ['responsive'],
- backdropFilter: ['responsive'],
- backdropGrayscale: ['responsive'],
- backdropHueRotate: ['responsive'],
- backdropInvert: ['responsive'],
- backdropSaturate: ['responsive'],
- backdropSepia: ['responsive'],
- backgroundAttachment: ['responsive'],
- backgroundBlendMode: ['responsive'],
- backgroundClip: ['responsive'],
- backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
- backgroundImage: ['responsive'],
- backgroundOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
- backgroundPosition: ['responsive'],
- backgroundRepeat: ['responsive'],
- backgroundSize: ['responsive'],
- blur: ['responsive'],
- borderCollapse: ['responsive'],
- borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
- borderOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
- borderRadius: ['responsive'],
- borderStyle: ['responsive'],
- borderWidth: ['responsive'],
- boxDecorationBreak: ['responsive'],
- boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
- boxSizing: ['responsive'],
- brightness: ['responsive'],
- clear: ['responsive'],
- container: ['responsive'],
- contrast: ['responsive'],
- cursor: ['responsive'],
- display: ['responsive'],
- divideColor: ['responsive', 'dark'],
- divideOpacity: ['responsive', 'dark'],
- divideStyle: ['responsive'],
- divideWidth: ['responsive'],
- dropShadow: ['responsive'],
- fill: ['responsive'],
- filter: ['responsive'],
- flex: ['responsive'],
- flexDirection: ['responsive'],
- flexGrow: ['responsive'],
- flexShrink: ['responsive'],
- flexWrap: ['responsive'],
- float: ['responsive'],
- fontFamily: ['responsive'],
- fontSize: ['responsive'],
- fontSmoothing: ['responsive'],
- fontStyle: ['responsive'],
- fontVariantNumeric: ['responsive'],
- fontWeight: ['responsive'],
- gap: ['responsive'],
- gradientColorStops: ['responsive', 'dark', 'hover', 'focus'],
- grayscale: ['responsive'],
- gridAutoColumns: ['responsive'],
- gridAutoFlow: ['responsive'],
- gridAutoRows: ['responsive'],
- gridColumn: ['responsive'],
- gridColumnEnd: ['responsive'],
- gridColumnStart: ['responsive'],
- gridRow: ['responsive'],
- gridRowEnd: ['responsive'],
- gridRowStart: ['responsive'],
- gridTemplateColumns: ['responsive'],
- gridTemplateRows: ['responsive'],
- height: ['responsive'],
- hueRotate: ['responsive'],
- inset: ['responsive'],
- invert: ['responsive'],
- isolation: ['responsive'],
- justifyContent: ['responsive'],
- justifyItems: ['responsive'],
- justifySelf: ['responsive'],
- letterSpacing: ['responsive'],
- lineHeight: ['responsive'],
- listStylePosition: ['responsive'],
- listStyleType: ['responsive'],
- margin: ['responsive'],
- maxHeight: ['responsive'],
- maxWidth: ['responsive'],
- minHeight: ['responsive'],
- minWidth: ['responsive'],
- mixBlendMode: ['responsive'],
- objectFit: ['responsive'],
- objectPosition: ['responsive'],
- opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
- order: ['responsive'],
- outline: ['responsive', 'focus-within', 'focus'],
- overflow: ['responsive'],
- overscrollBehavior: ['responsive'],
- padding: ['responsive'],
- placeContent: ['responsive'],
- placeItems: ['responsive'],
- placeSelf: ['responsive'],
- placeholderColor: ['responsive', 'dark', 'focus'],
- placeholderOpacity: ['responsive', 'dark', 'focus'],
- pointerEvents: ['responsive'],
- position: ['responsive'],
- resize: ['responsive'],
- ringColor: ['responsive', 'dark', 'focus-within', 'focus'],
- ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'],
- ringOffsetWidth: ['responsive', 'focus-within', 'focus'],
- ringOpacity: ['responsive', 'dark', 'focus-within', 'focus'],
- ringWidth: ['responsive', 'focus-within', 'focus'],
- rotate: ['responsive', 'hover', 'focus'],
- saturate: ['responsive'],
- scale: ['responsive', 'hover', 'focus'],
- sepia: ['responsive'],
- skew: ['responsive', 'hover', 'focus'],
- space: ['responsive'],
- stroke: ['responsive'],
- strokeWidth: ['responsive'],
- tableLayout: ['responsive'],
- textAlign: ['responsive'],
- textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
- textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
- textOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
- textOverflow: ['responsive'],
- textTransform: ['responsive'],
- transform: ['responsive'],
- transformOrigin: ['responsive'],
- transitionDelay: ['responsive'],
- transitionDuration: ['responsive'],
- transitionProperty: ['responsive'],
- transitionTimingFunction: ['responsive'],
- translate: ['responsive', 'hover', 'focus'],
- userSelect: ['responsive'],
- verticalAlign: ['responsive'],
- visibility: ['responsive'],
- whitespace: ['responsive'],
- width: ['responsive'],
- wordBreak: ['responsive'],
- zIndex: ['responsive', 'focus-within', 'focus'],
+ accessibility: ["responsive", "focus-within", "focus"],
+ alignContent: ["responsive"],
+ alignItems: ["responsive"],
+ alignSelf: ["responsive"],
+ animation: ["responsive"],
+ appearance: ["responsive"],
+ backdropBlur: ["responsive"],
+ backdropBrightness: ["responsive"],
+ backdropContrast: ["responsive"],
+ backdropDropShadow: ["responsive"],
+ backdropFilter: ["responsive"],
+ backdropGrayscale: ["responsive"],
+ backdropHueRotate: ["responsive"],
+ backdropInvert: ["responsive"],
+ backdropSaturate: ["responsive"],
+ backdropSepia: ["responsive"],
+ backgroundAttachment: ["responsive"],
+ backgroundBlendMode: ["responsive"],
+ backgroundClip: ["responsive"],
+ backgroundColor: ["responsive", "dark", "group-hover", "focus-within", "hover", "focus"],
+ backgroundImage: ["responsive"],
+ backgroundOpacity: ["responsive", "dark", "group-hover", "focus-within", "hover", "focus"],
+ backgroundPosition: ["responsive"],
+ backgroundRepeat: ["responsive"],
+ backgroundSize: ["responsive"],
+ blur: ["responsive"],
+ borderCollapse: ["responsive"],
+ borderColor: ["responsive", "dark", "group-hover", "focus-within", "hover", "focus"],
+ borderOpacity: ["responsive", "dark", "group-hover", "focus-within", "hover", "focus"],
+ borderRadius: ["responsive"],
+ borderStyle: ["responsive"],
+ borderWidth: ["responsive"],
+ boxDecorationBreak: ["responsive"],
+ boxShadow: ["responsive", "group-hover", "focus-within", "hover", "focus"],
+ boxSizing: ["responsive"],
+ brightness: ["responsive"],
+ clear: ["responsive"],
+ container: ["responsive"],
+ contrast: ["responsive"],
+ cursor: ["responsive"],
+ display: ["responsive"],
+ divideColor: ["responsive", "dark"],
+ divideOpacity: ["responsive", "dark"],
+ divideStyle: ["responsive"],
+ divideWidth: ["responsive"],
+ dropShadow: ["responsive"],
+ fill: ["responsive"],
+ filter: ["responsive"],
+ flex: ["responsive"],
+ flexDirection: ["responsive"],
+ flexGrow: ["responsive"],
+ flexShrink: ["responsive"],
+ flexWrap: ["responsive"],
+ float: ["responsive"],
+ fontFamily: ["responsive"],
+ fontSize: ["responsive"],
+ fontSmoothing: ["responsive"],
+ fontStyle: ["responsive"],
+ fontVariantNumeric: ["responsive"],
+ fontWeight: ["responsive"],
+ gap: ["responsive"],
+ gradientColorStops: ["responsive", "dark", "hover", "focus"],
+ grayscale: ["responsive"],
+ gridAutoColumns: ["responsive"],
+ gridAutoFlow: ["responsive"],
+ gridAutoRows: ["responsive"],
+ gridColumn: ["responsive"],
+ gridColumnEnd: ["responsive"],
+ gridColumnStart: ["responsive"],
+ gridRow: ["responsive"],
+ gridRowEnd: ["responsive"],
+ gridRowStart: ["responsive"],
+ gridTemplateColumns: ["responsive"],
+ gridTemplateRows: ["responsive"],
+ height: ["responsive"],
+ hueRotate: ["responsive"],
+ inset: ["responsive"],
+ invert: ["responsive"],
+ isolation: ["responsive"],
+ justifyContent: ["responsive"],
+ justifyItems: ["responsive"],
+ justifySelf: ["responsive"],
+ letterSpacing: ["responsive"],
+ lineHeight: ["responsive"],
+ listStylePosition: ["responsive"],
+ listStyleType: ["responsive"],
+ margin: ["responsive"],
+ maxHeight: ["responsive"],
+ maxWidth: ["responsive"],
+ minHeight: ["responsive"],
+ minWidth: ["responsive"],
+ mixBlendMode: ["responsive"],
+ objectFit: ["responsive"],
+ objectPosition: ["responsive"],
+ opacity: ["responsive", "group-hover", "focus-within", "hover", "focus"],
+ order: ["responsive"],
+ outline: ["responsive", "focus-within", "focus"],
+ overflow: ["responsive"],
+ overscrollBehavior: ["responsive"],
+ padding: ["responsive"],
+ placeContent: ["responsive"],
+ placeItems: ["responsive"],
+ placeSelf: ["responsive"],
+ placeholderColor: ["responsive", "dark", "focus"],
+ placeholderOpacity: ["responsive", "dark", "focus"],
+ pointerEvents: ["responsive"],
+ position: ["responsive"],
+ resize: ["responsive"],
+ ringColor: ["responsive", "dark", "focus-within", "focus"],
+ ringOffsetColor: ["responsive", "dark", "focus-within", "focus"],
+ ringOffsetWidth: ["responsive", "focus-within", "focus"],
+ ringOpacity: ["responsive", "dark", "focus-within", "focus"],
+ ringWidth: ["responsive", "focus-within", "focus"],
+ rotate: ["responsive", "hover", "focus"],
+ saturate: ["responsive"],
+ scale: ["responsive", "hover", "focus"],
+ sepia: ["responsive"],
+ skew: ["responsive", "hover", "focus"],
+ space: ["responsive"],
+ stroke: ["responsive"],
+ strokeWidth: ["responsive"],
+ tableLayout: ["responsive"],
+ textAlign: ["responsive"],
+ textColor: ["responsive", "dark", "group-hover", "focus-within", "hover", "focus"],
+ textDecoration: ["responsive", "group-hover", "focus-within", "hover", "focus"],
+ textOpacity: ["responsive", "dark", "group-hover", "focus-within", "hover", "focus"],
+ textOverflow: ["responsive"],
+ textTransform: ["responsive"],
+ transform: ["responsive"],
+ transformOrigin: ["responsive"],
+ transitionDelay: ["responsive"],
+ transitionDuration: ["responsive"],
+ transitionProperty: ["responsive"],
+ transitionTimingFunction: ["responsive"],
+ translate: ["responsive", "hover", "focus"],
+ userSelect: ["responsive"],
+ verticalAlign: ["responsive"],
+ visibility: ["responsive"],
+ whitespace: ["responsive"],
+ width: ["responsive"],
+ wordBreak: ["responsive"],
+ zIndex: ["responsive", "focus-within", "focus"],
// Non-default
extend: {
- typography: ['dark']
+ typography: ["dark"],
},
},
- plugins: [
- require('@tailwindcss/forms'),
- require('@tailwindcss/typography'),
- ],
-}
+ plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
+};