@histoire/controls 0.11.4 → 0.11.6

package/dist/index.es.js

@@ -18,7 +18,7 @@ const ca = {
     return (e, i) => {
       var n;
       return S(), _("button", {
-        class: gt(["htw-cursor-pointer htw-rounded-sm", t[(n = s.color) != null ? n : "default"]])
+        class: gt(["histoire-button htw-cursor-pointer htw-rounded-sm", t[(n = s.color) != null ? n : "default"]])
       }, [
         ct(e.$slots, "default")
       ], 2);
@@ -33,7 +33,7 @@ const ca = {
     tag: { default: "label" }
   },
   setup(s) {
-    return (t, e) => (S(), Q(sa(s.tag), { class: "htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap" }, {
+    return (t, e) => (S(), Q(sa(s.tag), { class: "histoire-wrapper htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap" }, {
       default: q(() => [
         _t((S(), _("span", fa, [
           te(Ct(s.title), 1)
@@ -73,7 +73,7 @@ const ca = {
       tag: "div",
       role: "group",
       title: s.title,
-      class: "htw-flex-nowrap htw-items-center"
+      class: "histoire-button-group htw-flex-nowrap htw-items-center"
     }, {
       actions: q(() => [
         ct(r.$slots, "actions")
@@ -126,7 +126,7 @@ const ca = {
       var a, c, f;
       r.value = (f = (c = (a = n.value).getTotalLength) == null ? void 0 : c.call(a)) != null ? f : 21.21;
     }), (a, c) => (S(), _("div", {
-      class: gt(["htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative", { "htw-cursor-pointer": s.withToggle }]),
+      class: gt(["histoire-simple-checkbox htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative", { "htw-cursor-pointer": s.withToggle }]),
       onClick: i
     }, [
       B("div", {
@@ -171,7 +171,7 @@ const ca = {
     return (n, r) => (S(), Q(jt, {
       role: "checkbox",
       tabindex: "0",
-      class: "htw-cursor-pointer htw-items-center",
+      class: "histoire-checkbox htw-cursor-pointer htw-items-center",
       title: s.title,
       onClick: r[0] || (r[0] = (o) => i()),
       onKeydown: [
@@ -206,7 +206,7 @@ const ca = {
     return (r, o) => (S(), Q(jt, {
       role: "group",
       title: s.title,
-      class: gt(["htw-cursor-text", r.$attrs.class]),
+      class: gt(["histoire-checkbox-list htw-cursor-text", r.$attrs.class]),
       style: Pt(r.$attrs.style)
     }, {
       actions: q(() => [
@@ -251,7 +251,7 @@ const ca = {
     const e = rt();
     return (i, n) => (S(), Q(jt, {
       title: s.title,
-      class: gt(["htw-cursor-text htw-items-center", i.$attrs.class]),
+      class: gt(["histoire-text htw-cursor-text htw-items-center", i.$attrs.class]),
       style: Pt(i.$attrs.style),
       onClick: n[1] || (n[1] = (r) => e.value.focus())
     }, {
@@ -309,7 +309,7 @@ const ca = {
     return ra(() => {
       f();
     }), (u, d) => (S(), Q(jt, {
-      class: gt(["htw-cursor-ew-resize htw-items-center", [
+      class: gt(["histoire-number htw-cursor-ew-resize htw-items-center", [
         u.$attrs.class,
         { "htw-select-none": o.value }
       ]]),
@@ -370,7 +370,7 @@ const Ra = { class: "htw-relative htw-w-full htw-flex htw-items-center" }, La =
       left: 8 + (n.value.clientWidth - 16) * o.value + "px"
     } : {});
     return (h, a) => (S(), Q(jt, {
-      class: gt(["htw-items-center", h.$attrs.class]),
+      class: gt(["histoire-slider htw-items-center", h.$attrs.class]),
       title: s.title,
       style: Pt(h.$attrs.style)
     }, {
@@ -422,7 +422,7 @@ const Ra = { class: "htw-relative htw-w-full htw-flex htw-items-center" }, La =
     const e = rt();
     return (i, n) => (S(), Q(jt, {
       title: s.title,
-      class: gt(["htw-cursor-text", i.$attrs.class]),
+      class: gt(["histoire-textarea htw-cursor-text", i.$attrs.class]),
       style: Pt(i.$attrs.style),
       onClick: n[1] || (n[1] = (r) => e.value.focus())
     }, {
@@ -501,7 +501,7 @@ const $a = { class: "htw-cursor-pointer htw-w-full htw-outline-none htw-px-2 htw
   setup(s, { emit: t }) {
     return (e, i) => (S(), Q(jt, {
       title: s.title,
-      class: gt(["htw-cursor-text htw-items-center", e.$attrs.class]),
+      class: gt(["histoire-select htw-cursor-text htw-items-center", e.$attrs.class]),
       style: Pt(e.$attrs.style)
     }, {
       actions: q(() => [
@@ -542,7 +542,7 @@ const $a = { class: "htw-cursor-pointer htw-w-full htw-outline-none htw-px-2 htw
   }
 }), Ua = {
   key: 0,
-  class: "htw-grid htw-gap-4 htw-grid-cols-[repeat(auto-fill,minmax(200px,1fr))] htw-m-4"
+  class: "histoire-color-shades htw-grid htw-gap-4 htw-grid-cols-[repeat(auto-fill,minmax(200px,1fr))] htw-m-4"
 }, Qa = ["onMouseenter"], Ja = { class: "htw-flex htw-gap-1" }, Xa = { class: "htw-my-0 htw-truncate htw-shrink" }, Ya = { class: "htw-flex htw-gap-1" }, Za = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" }, tc = {
   name: "HstColorShades"
 }, ec = /* @__PURE__ */ tt({
@@ -642,7 +642,7 @@ const $a = { class: "htw-cursor-pointer htw-w-full htw-outline-none htw-px-2 htw
     }), i = rt(null);
     return (n, r) => (S(!0), _(fe, null, Be(H(e), (o) => (S(), _("div", {
       key: o.key,
-      class: "htw-flex htw-flex-col htw-gap-2 htw-my-8",
+      class: "histoire-token-list htw-flex htw-flex-col htw-gap-2 htw-my-8",
       onMouseenter: (l) => i.value = o.key,
       onMouseleave: r[0] || (r[0] = (l) => i.value = null)
     }, [
@@ -690,7 +690,7 @@ const cc = ["onMouseenter"], fc = { class: "htw-flex htw-gap-1" }, uc = { class:
       });
     }), i = at(() => `${t.colSize}px`), n = rt(null);
     return (r, o) => (S(), _("div", {
-      class: "htw-bind-col-size htw-grid htw-gap-4 htw-m-4",
+      class: "histoire-token-grid htw-bind-col-size htw-grid htw-gap-4 htw-m-4",
       style: Pt({
         "--histoire-col-size": H(i)
       })
@@ -750,7 +750,7 @@ const cc = ["onMouseenter"], fc = { class: "htw-flex htw-gap-1" }, uc = { class:
     return (o, l) => (S(), Q(jt, {
       role: "group",
       title: s.title,
-      class: gt(["htw-cursor-text", o.$attrs.class]),
+      class: gt(["histoire-radio htw-cursor-text", o.$attrs.class]),
       style: Pt(o.$attrs.style)
     }, {
       actions: q(() => [
@@ -12289,7 +12289,7 @@ const Og = (s, t) => {
       }
     }), (c, f) => (S(), Q(jt, {
       title: s.title,
-      class: gt(["htw-cursor-text", c.$attrs.class]),
+      class: gt(["histoire-json htw-cursor-text", c.$attrs.class]),
       style: Pt(c.$attrs.style)
     }, {
       actions: q(() => [
@@ -12312,7 +12312,7 @@ const Og = (s, t) => {
       _: 3
     }, 8, ["title", "class", "style"]));
   }
-}), Tg = /* @__PURE__ */ Og(Dg, [["__scopeId", "data-v-35a6e314"]]), Pg = jo, Bg = wa, Rg = va, Lg = Oa, Eg = Ta, Ng = Ba, Vg = Na, Ig = Ha, Hg = Ga, $g = ec, Fg = ac, zg = mc, _g = Me, Wg = xc, jg = Tg, Jg = {
+}), Tg = /* @__PURE__ */ Og(Dg, [["__scopeId", "data-v-7e04a5c8"]]), Pg = jo, Bg = wa, Rg = va, Lg = Oa, Eg = Ta, Ng = Ba, Vg = Na, Ig = Ha, Hg = Ga, $g = ec, Fg = ac, zg = mc, _g = Me, Wg = xc, jg = Tg, Jg = {
   HstButton: Pg,
   HstButtonGroup: Bg,
   HstCheckbox: Rg,

package/dist/style.css

@@ -1 +1 @@
-.htw-range-input::-webkit-slider-thumb{height:.75rem;width:.75rem;-webkit-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.htw-dark .htw-range-input::-webkit-slider-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}.htw-range-input:hover::-webkit-slider-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important}.htw-range-input::-moz-range-thumb{height:.75rem;width:.75rem;-moz-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.htw-dark .htw-range-input::-moz-range-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}.htw-range-input:hover::-moz-range-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important}.v-popper{line-height:0}.htw-dark .v-popper--theme-dropdown .v-popper__inner{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(244 244 245 / var(--tw-text-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{--tw-border-opacity: 1;border-color:rgb(63 63 70 / var(--tw-border-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity))}.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{transform:scale(.75)}.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{transform:none;transition:transform .15s cubic-bezier(0,1,.5,1)}.v-popper__popper:focus-visible{outline:none}.htw-bind-col-size{grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))}.__histoire-json-code[data-v-35a6e314] .cm-editor{height:100%;min-width:280px}
+.htw-range-input::-webkit-slider-thumb{height:.75rem;width:.75rem;-webkit-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.htw-dark .htw-range-input::-webkit-slider-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}.htw-range-input:hover::-webkit-slider-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important}.htw-range-input::-moz-range-thumb{height:.75rem;width:.75rem;-moz-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.htw-dark .htw-range-input::-moz-range-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}.htw-range-input:hover::-moz-range-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important}.v-popper{line-height:0}.htw-dark .v-popper--theme-dropdown .v-popper__inner{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(244 244 245 / var(--tw-text-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{--tw-border-opacity: 1;border-color:rgb(63 63 70 / var(--tw-border-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity))}.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{transform:scale(.75)}.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{transform:none;transition:transform .15s cubic-bezier(0,1,.5,1)}.v-popper__popper:focus-visible{outline:none}.htw-bind-col-size{grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))}.__histoire-json-code[data-v-7e04a5c8] .cm-editor{height:100%;min-width:280px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/controls",
-  "version": "0.11.4",
+  "version": "0.11.6",
   "description": "Prebuilt controls components",
   "license": "MIT",
   "author": {
@@ -38,7 +38,7 @@
     "@codemirror/state": "^6.1.2",
     "@codemirror/theme-one-dark": "^6.1.0",
     "@codemirror/view": "^6.3.0",
-    "@histoire/vendors": "^0.11.4"
+    "@histoire/vendors": "^0.11.6"
   },
   "devDependencies": {
     "@peeky/server": "^0.14.0",

package/src/components/HstWrapper.vue

@@ -21,7 +21,7 @@ withDefaults(defineProps<{
 <template>
   <component
     :is="tag"
-    class="htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap"
+    class="histoire-wrapper htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap"
   >
     <span
       v-tooltip="{

package/src/components/button/HstButton.vue

@@ -18,7 +18,7 @@ defineProps<{
 
 <template>
   <button
-    class="htw-cursor-pointer htw-rounded-sm"
+    class="histoire-button htw-cursor-pointer htw-rounded-sm"
     :class="colors[color ?? 'default']"
   >
     <slot />

package/src/components/button/HstButtonGroup.vue

@@ -43,7 +43,7 @@ function selectOption (value: string) {
     tag="div"
     role="group"
     :title="title"
-    class="htw-flex-nowrap htw-items-center"
+    class="histoire-button-group htw-flex-nowrap htw-items-center"
   >
     <div class="htw-flex htw-gap-px htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 htw-rounded-sm htw-p-px">
       <HstButton

package/src/components/checkbox/HstCheckbox.vue

@@ -26,7 +26,7 @@ function toggle () {
   <HstWrapper
     role="checkbox"
     tabindex="0"
-    class="htw-cursor-pointer htw-items-center"
+    class="histoire-checkbox htw-cursor-pointer htw-items-center"
     :title="title"
     @click="toggle()"
     @keydown.enter.prevent="toggle()"

package/src/components/checkbox/HstCheckboxList.vue

@@ -46,7 +46,7 @@ function toggleOption (value: string) {
   <HstWrapper
     role="group"
     :title="title"
-    class="htw-cursor-text"
+    class="histoire-checkbox-list htw-cursor-text"
     :class="$attrs.class"
     :style="$attrs.style"
   >

package/src/components/checkbox/HstSimpleCheckbox.vue

@@ -45,7 +45,7 @@ watch(path, () => {
 
 <template>
   <div
-    class="htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative"
+    class="histoire-simple-checkbox htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative"
     :class="{'htw-cursor-pointer': withToggle}"
     @click="toggle"
   >

package/src/components/checkbox/__snapshots__/HstCheckbox.test.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`HstCheckbox toggle to checked 1`] = `
 <label
-  class="htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap htw-cursor-pointer htw-items-center"
+  class="histoire-wrapper htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap histoire-checkbox htw-cursor-pointer htw-items-center"
   role="checkbox"
   tabindex="0"
 >
@@ -11,7 +11,7 @@ exports[`HstCheckbox toggle to checked 1`] = `
   </span>
   <span class="htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1">
     <span class="htw-block htw-grow htw-max-w-full">
-      <div class="htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
+      <div class="histoire-simple-checkbox htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
         <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-black/25 dark:htw-border-white/25 htw-delay-150">
         </div>
         <svg
@@ -37,7 +37,7 @@ exports[`HstCheckbox toggle to checked 1`] = `
 
 exports[`HstCheckbox toggle to unchecked 1`] = `
 <label
-  class="htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap htw-cursor-pointer htw-items-center"
+  class="histoire-wrapper htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap histoire-checkbox htw-cursor-pointer htw-items-center"
   role="checkbox"
   tabindex="0"
 >
@@ -46,7 +46,7 @@ exports[`HstCheckbox toggle to unchecked 1`] = `
   </span>
   <span class="htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1">
     <span class="htw-block htw-grow htw-max-w-full">
-      <div class="htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
+      <div class="histoire-simple-checkbox htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
         <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-primary-500 htw-border-8">
         </div>
         <svg

package/src/components/design-tokens/HstColorShades.vue

@@ -52,7 +52,7 @@ const hover = ref<string>(null)
 <template>
   <div
     v-if="displayedShades.length"
-    class="htw-grid htw-gap-4 htw-grid-cols-[repeat(auto-fill,minmax(200px,1fr))] htw-m-4"
+    class="histoire-color-shades htw-grid htw-gap-4 htw-grid-cols-[repeat(auto-fill,minmax(200px,1fr))] htw-m-4"
   >
     <div
       v-for="shade of displayedShades"

package/src/components/design-tokens/HstTokenGrid.vue

@@ -38,7 +38,7 @@ const hover = ref<string>(null)
 
 <template>
   <div
-    class="htw-bind-col-size htw-grid htw-gap-4 htw-m-4"
+    class="histoire-token-grid htw-bind-col-size htw-grid htw-gap-4 htw-m-4"
     :style="{
       '--histoire-col-size': colSizePx,
     }"

package/src/components/design-tokens/HstTokenList.vue

@@ -33,7 +33,7 @@ const hover = ref<string>(null)
   <div
     v-for="token of processedTokens"
     :key="token.key"
-    class="htw-flex htw-flex-col htw-gap-2 htw-my-8"
+    class="histoire-token-list htw-flex htw-flex-col htw-gap-2 htw-my-8"
     @mouseenter="hover = token.key"
     @mouseleave="hover = null"
   >

package/src/components/json/HstJson.vue

@@ -117,7 +117,7 @@ watch(() => internalValue.value, () => {
 <template>
   <HstWrapper
     :title="title"
-    class="htw-cursor-text"
+    class="histoire-json htw-cursor-text"
     :class="$attrs.class"
     :style="$attrs.style"
   >

package/src/components/number/HstNumber.vue

@@ -67,7 +67,7 @@ onUnmounted(() => {
 
 <template>
   <HstWrapper
-    class="htw-cursor-ew-resize htw-items-center"
+    class="histoire-number htw-cursor-ew-resize htw-items-center"
     :title="title"
     :class="[
       $attrs.class,

package/src/components/radio/HstRadio.vue

@@ -45,7 +45,7 @@ const animationEnabled = ref(false)
   <HstWrapper
     role="group"
     :title="title"
-    class="htw-cursor-text"
+    class="histoire-radio htw-cursor-text"
     :class="$attrs.class"
     :style="$attrs.style"
   >

package/src/components/select/HstSelect.vue

@@ -23,7 +23,7 @@ const emits = defineEmits<{
 <template>
   <HstWrapper
     :title="title"
-    class="htw-cursor-text htw-items-center"
+    class="histoire-select htw-cursor-text htw-items-center"
     :class="$attrs.class"
     :style="$attrs.style"
   >

package/src/components/slider/HstSlider.vue

@@ -50,7 +50,7 @@ const tooltipStyle = computed<CSSProperties>(() => {
 
 <template>
   <HstWrapper
-    class="htw-items-center"
+    class="histoire-slider htw-items-center"
     :title="title"
     :class="$attrs.class"
     :style="$attrs.style"

package/src/components/text/HstText.vue

@@ -23,7 +23,7 @@ const input = ref<HTMLInputElement>()
 <template>
   <HstWrapper
     :title="title"
-    class="htw-cursor-text htw-items-center"
+    class="histoire-text htw-cursor-text htw-items-center"
     :class="$attrs.class"
     :style="$attrs.style"
     @click="input.focus()"

package/src/components/textarea/HstTextarea.vue

@@ -24,7 +24,7 @@ const input = ref<HTMLInputElement>()
 <template>
   <HstWrapper
     :title="title"
-    class="htw-cursor-text"
+    class="histoire-textarea htw-cursor-text"
     :class="$attrs.class"
     :style="$attrs.style"
     @click="input.focus()"

package/tailwind.config.cjs

@@ -7,7 +7,7 @@ module.exports = {
   content: [
     path.resolve(__dirname, './src/**/*.{vue,js,ts,jsx,tsx,md}'),
   ],
-  // corePlugins: {
-  //   preflight: false,
-  // },
+  corePlugins: {
+    preflight: false,
+  },
 }