[Draft] Upgrade to tailwind v4

package.json

@@ -45,7 +45,7 @@
     "@mona-health/react-input-mask": "^3.0.3",
     "class-variance-authority": "^0.7.0",
     "react-select": "^5.8.2",
-    "tailwind-merge": "^2.5.4"
+    "tailwind-merge": "^3.0.2"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
@@ -64,6 +64,7 @@
     "@storybook/react-vite": "^8.5.3",
     "@storybook/test": "^8.5.3",
     "@switchdreams/lint-config": "^0.0.3",
+    "@tailwindcss/postcss": "^4.0.15",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/react": "^19.0.8",
@@ -73,7 +74,6 @@
     "@typescript-eslint/parser": "^8.23.0",
     "@vitejs/plugin-react": "^4.3.4",
     "agadoo": "^3.0.0",
-    "autoprefixer": "^10.4.20",
     "eslint": "^9.19.0",
     "globals": "^15.11.0",
     "jsdom": "^24.0.0",
@@ -86,7 +86,7 @@
     "react-hooks": "^1.0.1",
     "rollup-plugin-pure": "^0.2.1",
     "storybook": "^8.5.3",
-    "tailwindcss": "^3.4.14",
+    "tailwindcss": "^4.0.15",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.23.0",
     "vite": "^6.0.11",

postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

src/components/CheckBox/__tests__/CheckBox.test.tsx

@@ -36,7 +36,7 @@ describe("CheckBox", () => {
     const classes = getTailwindClasses(checkBoxElement);
     expect(classes).toContain("h-5");
     expect(classes).toContain("w-5");
-    expect(classes).toContain("rounded-sm");
+    expect(classes).toContain("rounded-xs");
     expect(classes).toContain("sw-ui-checkbox-primary");
   });
 });

src/components/CheckBox/index.tsx

@@ -21,7 +21,7 @@ const checkBoxVariants = cva(
     variants: {
       shape: {
         circle: "rounded-full",
-        square: "rounded-sm",
+        square: "rounded-xs",
       },
       size: {
         small: "h-4 w-4",

src/components/Modal/index.tsx

@@ -23,7 +23,7 @@ export interface IModalProps {
 }
 
 const ModalVariants = cva(
-  "fixed z-[100] h-auto w-full rounded-lg bg-white max-md:bottom-0 md:left-1/2 md:top-1/2 md:min-w-[40rem] md:max-w-[52rem] md:-translate-x-1/2 md:-translate-y-1/2",
+  "fixed z-100 h-auto w-full rounded-lg bg-white max-md:bottom-0 md:left-1/2 md:top-1/2 md:min-w-[40rem] md:max-w-[52rem] md:-translate-x-1/2 md:-translate-y-1/2",
   {
     variants: {
       open: {

src/components/Popover/index.tsx

@@ -43,7 +43,7 @@ const Popover = ({
       <PopoverButton>{button}</PopoverButton>
       <PopoverPanel
         anchor={positionTranslate(position)}
-        className={twMerge("fixed z-10 mt-2 w-fit rounded text-xs", className)}
+        className={twMerge("fixed z-10 mt-2 w-fit rounded-sm text-xs", className)}
         {...rest}
       >
         {children}

src/components/SearchInput/SearchInput.tsx

@@ -69,7 +69,7 @@ export const SearchInputOptionsVariants = cva(
 );
 
 export const SearchInputButtonVariants = cva(
-  "sw-ui-rounded-curvature-md sw-ui-input relative my-2 w-full cursor-default border border-coolGray-400 pl-3 pr-10 text-left text-coolGray-500 hover:bg-coolGray-50 focus:outline-none",
+  "sw-ui-rounded-curvature-md sw-ui-input relative my-2 w-full cursor-default border border-coolGray-400 pl-3 pr-10 text-left text-coolGray-500 hover:bg-coolGray-50 focus:outline-hidden",
   {
     variants: {
       disabled: {
@@ -316,7 +316,7 @@ function SearchInput({
                 leaveTo="opacity-0"
                 afterLeave={() => setQuery("")}
               >
-                <ComboboxOptions className="appearence-none sw-ui-rounded-curvature-md z-30 mt-1 max-h-60 w-full overflow-auto bg-white py-1 shadow shadow-primary-25 ring-1 ring-primary-25">
+                <ComboboxOptions className="appearence-none sw-ui-rounded-curvature-md z-30 mt-1 max-h-60 w-full overflow-auto bg-white py-1 shadow-sm shadow-primary-25 ring-1 ring-primary-25">
                   {filteredOptions.length === 0 && query !== "" ? (
                     <div className="relative cursor-default select-none px-3 py-2 text-coolGray-800">
                       Nothing found.

src/components/Select/styles.tsx

@@ -74,7 +74,7 @@ const controlStylesCalc = ({ size, error, className }: ControlStylesProps) => ({
 });
 
 const optionStyles = {
-  base: "hover:cursor-pointer px-3 py-2 mt-1 rounded text-md h-11",
+  base: "hover:cursor-pointer px-3 py-2 mt-1 rounded-sm text-md h-11",
   focus: "bg-coolGray-50",
   selected: "bg-primary-25 text-coolGray-900",
 };
@@ -100,7 +100,7 @@ export const selectClassName = ({ ...rest }: ControlStylesProps) => {
         optionStyles.base,
       ),
     noOptionsMessage: () =>
-      "text-gray-500 p-2 bg-gray-50 border border-dashed border-gray-200 rounded-sm",
+      "text-gray-500 p-2 bg-gray-50 border border-dashed border-gray-200 rounded-xs",
   };
 };
 

src/components/SelectBox/index.tsx

@@ -194,7 +194,7 @@ function SelectBox({
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <ListboxOptions className="appearence-none absolute z-30 mt-1 max-h-60 w-full overflow-auto rounded border-primary-25 bg-white py-1 shadow shadow-primary-25 ring-2 ring-primary-25">
+                <ListboxOptions className="appearence-none absolute z-30 mt-1 max-h-60 w-full overflow-auto rounded-sm border-primary-25 bg-white py-1 shadow-sm shadow-primary-25 ring-2 ring-primary-25">
                   {options.map((option, index) => (
                     <ListboxOption
                       key={index}

src/components/Slider/Slider.tsx

@@ -60,7 +60,7 @@ export const Slider = /* @__PURE__ */ forwardRef<HTMLInputElement, SliderProps>(
         />
         <div
           data-testid="value-box"
-          className="absolute bottom-full mt-2 hidden h-8 w-10 flex-none -translate-x-1/2 items-center justify-center rounded-sm bg-primary-300 py-1 text-center text-gray-white"
+          className="absolute bottom-full mt-2 hidden h-8 w-10 flex-none -translate-x-1/2 items-center justify-center rounded-xs bg-primary-300 py-1 text-center text-gray-white"
           ref={box}
         >
           {value}

src/components/Tab/Tab.stories.tsx

@@ -15,39 +15,39 @@ const tabsArray = [
   {
     name: "Teste 1",
     info: (
-      <div className="h-full w-full rounded bg-primary-100">
+      <div className="h-full w-full rounded-sm bg-primary-100">
         Teste 1 Vorem ipsum dolor sit amet, consectetur Vorem ipsum dolor{" "}
       </div>
     ),
   },
   {
     name: "Teste 2",
     info: (
-      <div className="h-full w-full rounded bg-primary-100">
+      <div className="h-full w-full rounded-sm bg-primary-100">
         Teste 2 Vorem ipsum dolor sit amet, consectetur Vorem ipsum dolor{" "}
       </div>
     ),
   },
   {
     name: "Teste 3",
     info: (
-      <div className="h-full w-full rounded bg-primary-100">
+      <div className="h-full w-full rounded-sm bg-primary-100">
         Teste 3 Vorem ipsum dolor sit amet, consectetur Vorem ipsum dolor{" "}
       </div>
     ),
   },
   {
     name: "Teste 4",
     info: (
-      <div className="h-full w-full rounded bg-primary-100">
+      <div className="h-full w-full rounded-sm bg-primary-100">
         Teste 4 Vorem ipsum dolor sit amet, consectetur Vorem ipsum dolor{" "}
       </div>
     ),
   },
   {
     name: "Teste 5",
     info: (
-      <div className="h-full w-full rounded bg-primary-100">
+      <div className="h-full w-full rounded-sm bg-primary-100">
         Teste 5 Vorem ipsum dolor sit amet, consectetur Vorem ipsum dolor{" "}
       </div>
     ),
@@ -60,27 +60,27 @@ const Template: StoryFn<typeof Tab> = () => <Tab size="md" tabs={tabsArray} padd
 const Template2: StoryFn<typeof Tab> = (args) => (
   <Tab {...args}>
     <Tab.Panel title="Teste 1">
-      <div className="h-full w-full rounded bg-primary-100">
+      <div className="h-full w-full rounded-sm bg-primary-100">
         Teste 1 Vorem ipsum dolor sit amet, consectetur Vorem ipsum dolor{" "}
       </div>
     </Tab.Panel>
     <Tab.Panel title="Teste 2">
-      <div className="h-full w-full rounded bg-primary-100">
+      <div className="h-full w-full rounded-sm bg-primary-100">
         Teste 2 Vorem ipsum dolor sit amet, consectetur Vorem ipsum dolor{" "}
       </div>
     </Tab.Panel>
     <Tab.Panel title="Teste 3">
-      <div className="h-full w-full rounded bg-primary-100">
+      <div className="h-full w-full rounded-sm bg-primary-100">
         Teste 3 Vorem ipsum dolor sit amet, consectetur Vorem ipsum dolor{" "}
       </div>
     </Tab.Panel>
     <Tab.Panel title="Teste 4">
-      <div className="h-full w-full rounded bg-primary-100">
+      <div className="h-full w-full rounded-sm bg-primary-100">
         Teste 4 Vorem ipsum dolor sit amet, consectetur Vorem ipsum dolor{" "}
       </div>
     </Tab.Panel>
     <Tab.Panel title="Teste 5">
-      <div className="h-full w-full rounded bg-primary-100">
+      <div className="h-full w-full rounded-sm bg-primary-100">
         Teste 5 Vorem ipsum dolor sit amet, consectetur Vorem ipsum dolor{" "}
       </div>
     </Tab.Panel>

src/components/Tab/__tests__/Tab.test.tsx

@@ -58,7 +58,7 @@ describe("Tab", () => {
     render(
       <Tab>
         <Tab.Panel title="Tab 1">
-          <div className="h-full w-full rounded bg-primary-100">
+          <div className="h-full w-full rounded-sm bg-primary-100">
             Teste 1 Vorem ipsum dolor sit amet, consectetur Vorem ipsum dolor{" "}
           </div>
         </Tab.Panel>

src/components/Tab/index.tsx

@@ -20,7 +20,7 @@ export interface TabType extends HTMLAttributes<any> {
 export type TabVariantProps = VariantProps<typeof TabVariants>;
 
 export const TabVariants = cva(
-  "item-center text-align:center sw-ui-tab flex appearance-none justify-center border-b focus:outline-none ui-selected:font-medium",
+  "item-center text-align:center sw-ui-tab flex appearance-none justify-center border-b focus:outline-hidden ui-selected:font-medium",
   {
     variants: {
       size: {

src/components/TextField/TextFieldBase.tsx

@@ -29,7 +29,7 @@ export interface ITextFieldBase
 }
 
 const TextFieldBaseVariants = cva(
-  "sw-ui-rounded-curvature-md sw-ui-input w-full text-ellipsis border border-coolGray-400 text-md text-coolGray-900 hover:bg-coolGray-50 focus:outline-none",
+  "sw-ui-rounded-curvature-md sw-ui-input w-full text-ellipsis border border-coolGray-400 text-md text-coolGray-900 hover:bg-coolGray-50 focus:outline-hidden",
   {
     variants: {
       size: {

src/components/Tooltip/index.tsx

@@ -11,7 +11,7 @@ export interface ITooltip {
   className?: string;
 }
 
-const TooltipVariants = cva("h-fit w-fit rounded p-2 text-xs text-white", {
+const TooltipVariants = cva("h-fit w-fit rounded-sm p-2 text-xs text-white", {
   variants: {
     color: {
       primary: "bg-gray-950 text-white",

src/docs/pages/Login.tsx

@@ -45,14 +45,14 @@ const Login = () => {
             <form>
               <TextField
                 name="email"
-                className="mb-5 rounded-sm focus:border-primary-400"
+                className="mb-5 rounded-xs focus:border-primary-400"
                 label="E-mail"
                 placeholder="Insira seu e-email"
                 type="email"
               />
               <TextField
                 name="password"
-                className="rounded-sm focus:border-primary-400"
+                className="rounded-xs focus:border-primary-400"
                 label="Senha"
                 placeholder="Insira sua senha"
                 type={showPassword ? "text" : "password"}
@@ -69,13 +69,13 @@ const Login = () => {
                 </Text>
               </a>
               <Button
-                className="mt-6 rounded-sm bg-gray-950 text-white hover:bg-gray-900 focus:bg-gray-900 active:bg-gray-800"
+                className="mt-6 rounded-xs bg-gray-950 text-white hover:bg-gray-900 focus:bg-gray-900 active:bg-gray-800"
                 label="Entrar"
                 size="lg"
               />
             </form>
             <Button
-              className="mt-4 rounded-sm border border-solid border-gray-100 text-gray-800 hover:bg-gray-100 focus:border-2 active:bg-gray-200"
+              className="mt-4 rounded-xs border border-solid border-gray-100 text-gray-800 hover:bg-gray-100 focus:border-2 active:bg-gray-200"
               label="Entrar com o Outlook"
               variant="outline"
               size="lg"

src/index.css

@@ -1,3 +1,44 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '../tailwind.config.js';
+
+@theme {
+  --color-btn-primary-background: var(--color-primary-300);
+  --color-btn-primary-text: var(--color-white);
+  --color-btn-primary-hover: var(--color-primary-400);
+  --color-btn-primary-focus: var(--color-primary-300);
+  --color-btn-primary-active: var(--color-primary-500);
+}
+
+@layer components {
+  .sw-ui-btn-primary {
+    background-color: var(--color-btn-primary-background);
+    color: var(--color-btn-primary-text);
+    &:hover {
+      background-color: var(--color-btn-primary-hover);
+    }
+    &:focus {
+      background-color: var(--color-btn-primary-focus);
+    }
+    &:active {
+      background-color: var(--color-btn-primary-active);
+    }
+  }
+}
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}