Cafeta-components-react NPM

Design System

Aquí irá la descripción del proyecto

Publicación de un nuevo componente o de una nueva versión

Nota: Recuerda tener configurado tu ssh para poder publicar al repo (cafeta-components) y estar logueado con npm login.

Dentro del proyecto (cafeta-components)

git add .
git commit -m ‘feat’
lerna publish

En el proyecto a utilizar, con esto actualizaras la dependencia

yarn add @cafeta/components

¿Cómo usar el Design System?

Aquí se detalla lo que se tiene que considerar previamente

Pasos:

Instalar Dependencias

yarn add -D @craco/craco
yarn add -D @fullhuman/postcss-purgecss
yarn add -D autoprefixer
yarn add -D tailwind.macro
yarn add -D tailwindcss
yarn add -D @cafeta/components-react

Crear archivo craco.config.js en la raíz del proyecto con el siguiente código.

const { POSTCSS_MODES } = require('@craco/craco');
module.exports = {
  style: {
    postcss: {
      mode: POSTCSS_MODES.file,
    },
  },
};

Crear archivo postcss.config.js

const purgecss = require("@fullhuman/postcss-purgecss")({
  content: [
    "./src/**/*.html",
    "./src/**/*.js",
    "./src/**/*.jsx",
    "./src/**/*.ts",
    "./src/**/*.tsx",
    "./public/index.html"
  ],
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
});

module.exports = {
  plugins: [
    require("tailwindcss")("./src/tailwind.config.js"),
    require("autoprefixer"),
    ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
  ]
};

Para más información https://tailwindcss.com/docs/installation/#using-tailwind- with-postcss

Dentro del ./src crear la carpeta tailwind Crear el archivo config.js y theme.js dentro de tailwind

// config.js
const tailwindConfig = require("@cafeta/components-react/tailwind.config");
const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  theme: {
    ...tailwindConfig.theme,
    fontFamily: {
      ...defaultTheme.fontFamily,
      sans: ["Lato", ...defaultTheme.fontFamily.sans]
    }
  }
};

// theme.js
export default {
  "screens": {
    "sm": "640px",
    "md": "768px",
    "lg": "992px",
    "xl": "1280px"
  },
  "colors": {
    "primary": {
      "10": "var(--primary-10)",
      "20": "var(--primary-20)",
      "30": "var(--primary-30)",
      "40": "var(--primary-40)",
      "50": "var(--primary-50)",
      "60": "var(--primary-60)",
      "70": "var(--primary-70)",
      "80": "var(--primary-80)",
      "90": "var(--primary-90)",
      "default": "var(--primary)",
      "dark": "var(--primary-dark)"
    },
    "secondary": {
      "10": "var(--secondary-10)",
      "20": "var(--secondary-20)",
      "30": "var(--secondary-30)",
      "40": "var(--secondary-40)",
      "50": "var(--secondary-50)",
      "60": "var(--secondary-60)",
      "70": "var(--secondary-70)",
      "80": "var(--secondary-80)",
      "90": "var(--secondary-90)",
      "default": "var(--secondary)",
      "dark": "var(--secondary-dark)"
    },
    "neutral": {
      "01": "var(--neutral-01)",
      "02": "var(--neutral-02)",
      "03": "var(--neutral-03)",
      "04": "var(--neutral-04)"
    },
    "success": "var(--success)",
    "error": "var(--error)",
    "alert": "var(--alert)"
  },
  "backgroundColor": {
    "primary": {
      "10": "var(--primary-10)",
      "20": "var(--primary-20)",
      "30": "var(--primary-30)",
      "40": "var(--primary-40)",
      "50": "var(--primary-50)",
      "60": "var(--primary-60)",
      "70": "var(--primary-70)",
      "80": "var(--primary-80)",
      "90": "var(--primary-90)",
      "default": "var(--primary)",
      "dark": "var(--primary-dark)"
    },
    "secondary": {
      "10": "var(--secondary-10)",
      "20": "var(--secondary-20)",
      "30": "var(--secondary-30)",
      "40": "var(--secondary-40)",
      "50": "var(--secondary-50)",
      "60": "var(--secondary-60)",
      "70": "var(--secondary-70)",
      "80": "var(--secondary-80)",
      "90": "var(--secondary-90)",
      "default": "var(--secondary)",
      "dark": "var(--secondary-dark)"
    },
    "neutral": {
      "01": "var(--neutral-01)",
      "02": "var(--neutral-02)",
      "03": "var(--neutral-03)",
      "04": "var(--neutral-04)"
    },
    "success": "var(--success)",
    "error": "var(--error)",
    "alert": "var(--alert)",
    "01": "var(--background-01)",
    "02": "var(--background-02)",
    "03": "var(--background-03)",
    "04": "var(--background-04)",
    "05": "var(--background-05)",
    "disabled": "var(--disabled-background)"
  },
  "textColor": {
    "primary": {
      "10": "var(--primary-10)",
      "20": "var(--primary-20)",
      "30": "var(--primary-30)",
      "40": "var(--primary-40)",
      "50": "var(--primary-50)",
      "60": "var(--primary-60)",
      "70": "var(--primary-70)",
      "80": "var(--primary-80)",
      "90": "var(--primary-90)",
      "default": "var(--primary)",
      "dark": "var(--primary-dark)"
    },
    "secondary": {
      "10": "var(--secondary-10)",
      "20": "var(--secondary-20)",
      "30": "var(--secondary-30)",
      "40": "var(--secondary-40)",
      "50": "var(--secondary-50)",
      "60": "var(--secondary-60)",
      "70": "var(--secondary-70)",
      "80": "var(--secondary-80)",
      "90": "var(--secondary-90)",
      "default": "var(--secondary)",
      "dark": "var(--secondary-dark)"
    },
    "neutral": {
      "01": "var(--neutral-01)",
      "02": "var(--neutral-02)",
      "03": "var(--neutral-03)",
      "04": "var(--neutral-04)"
    },
    "success": "var(--success)",
    "error": "var(--error)",
    "alert": "var(--alert)",
    "disabled": "var(--disabled-text)"
  },
  "borderColor": {
    "primary": {
      "10": "var(--primary-10)",
      "20": "var(--primary-20)",
      "30": "var(--primary-30)",
      "40": "var(--primary-40)",
      "50": "var(--primary-50)",
      "60": "var(--primary-60)",
      "70": "var(--primary-70)",
      "80": "var(--primary-80)",
      "90": "var(--primary-90)",
      "default": "var(--primary)",
      "dark": "var(--primary-dark)"
    },
    "secondary": {
      "10": "var(--secondary-10)",
      "20": "var(--secondary-20)",
      "30": "var(--secondary-30)",
      "40": "var(--secondary-40)",
      "50": "var(--secondary-50)",
      "60": "var(--secondary-60)",
      "70": "var(--secondary-70)",
      "80": "var(--secondary-80)",
      "90": "var(--secondary-90)",
      "default": "var(--secondary)",
      "dark": "var(--secondary-dark)"
    },
    "neutral": {
      "01": "var(--neutral-01)",
      "02": "var(--neutral-02)",
      "03": "var(--neutral-03)",
      "04": "var(--neutral-04)"
    },
    "success": "var(--success)",
    "error": "var(--error)",
    "alert": "var(--alert)",
    "disabled": "var(--disabled-background)"
  },
  "spacing": {
    "xsm": "0.4rem",
    "sm": "0.8rem",
    "md": "1.2rem",
    "lg": "1.6rem",
    "xlg": "2rem",
    "xxlg": "2.4rem"
  },
  "borderRadius": {
    "sm": "0.4rem",
    "default": "0.8rem",
    "lg": "2.4rem",
    "full": "9999px"
  },
  "fontFamily": {
    "sans": [
      "Lato",
      "system-ui",
      "-apple-system",
      "BlinkMacSystemFont",
      "\"Segoe UI\"",
      "Roboto",
      "\"Helvetica Neue\"",
      "Arial",
      "\"Noto Sans\"",
      "sans-serif",
      "\"Apple Color Emoji\"",
      "\"Segoe UI Emoji\"",
      "\"Segoe UI Symbol\"",
      "\"Noto Color Emoji\""
    ],
    "serif": [
      "Georgia",
      "Cambria",
      "\"Times New Roman\"",
      "Times",
      "serif"
    ],
    "mono": [
      "Menlo",
      "Monaco",
      "Consolas",
      "\"Liberation Mono\"",
      "\"Courier New\"",
      "monospace"
    ]
  },
  "fontSize": {
    "heading-01": "2.4rem",
    "heading-02": "2rem",
    "subheading-01": "1.8rem",
    "subheading-02": "1.6rem",
    "body": "1.4rem",
    "body-02": "1.6rem",
    "small-01": "1.1rem",
    "small-02": "1.2rem",
    "small-03": "1rem",
    "display-01": "4.8rem",
    "display-02": "4rem"
  },
  "fontWeight": {
    "light": "300",
    "regular": "400",
    "bold": "700",
    "black": "900"
  },
  "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"
  },
  "backgroundSize": {
    "auto": "auto",
    "cover": "cover",
    "contain": "contain"
  },
  "borderWidth": {
    "0": "0",
    "2": "2px",
    "4": "4px",
    "8": "8px",
    "default": "1px"
  },
  "boxShadow": {
    "xs": "0 0 0 1px rgba(0, 0, 0, 0.05)",
    "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)",
    "outline": "0 0 0 3px rgba(66, 153, 225, 0.5)",
    "none": "none"
  },
  "container": {},
  "cursor": {
    "auto": "auto",
    "default": "default",
    "pointer": "pointer",
    "wait": "wait",
    "text": "text",
    "move": "move",
    "not-allowed": "not-allowed"
  },
  "fill": {
    "current": "currentColor"
  },
  "flex": {
    "1": "1 1 0%",
    "auto": "1 1 auto",
    "initial": "0 1 auto",
    "none": "none"
  },
  "flexGrow": {
    "0": "0",
    "default": "1"
  },
  "flexShrink": {
    "0": "0",
    "default": "1"
  },
  "height": {
    "auto": "auto",
    "xsm": "0.4rem",
    "sm": "0.8rem",
    "md": "1.2rem",
    "lg": "1.6rem",
    "xlg": "2rem",
    "xxlg": "2.4rem",
    "full": "100%",
    "screen": "100vh"
  },
  "inset": {
    "0": "0",
    "auto": "auto"
  },
  "letterSpacing": {
    "tighter": "-0.05em",
    "tight": "-0.025em",
    "normal": "0",
    "wide": "0.025em",
    "wider": "0.05em",
    "widest": "0.1em"
  },
  "lineHeight": {
    "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"
  },
  "listStyleType": {
    "none": "none",
    "disc": "disc",
    "decimal": "decimal"
  },
  "margin": {
    "auto": "auto",
    "xsm": "0.4rem",
    "sm": "0.8rem",
    "md": "1.2rem",
    "lg": "1.6rem",
    "xlg": "2rem",
    "xxlg": "2.4rem",
    "-xsm": "-0.4rem",
    "-sm": "-0.8rem",
    "-md": "-1.2rem",
    "-lg": "-1.6rem",
    "-xlg": "-2rem",
    "-xxlg": "-2.4rem"
  },
  "maxHeight": {
    "full": "100%",
    "screen": "100vh"
  },
  "maxWidth": {
    "none": "none",
    "xs": "20rem",
    "sm": "24rem",
    "md": "28rem",
    "lg": "32rem",
    "xl": "36rem",
    "2xl": "42rem",
    "3xl": "48rem",
    "4xl": "56rem",
    "5xl": "64rem",
    "6xl": "72rem",
    "full": "100%",
    "screen-sm": "640px",
    "screen-md": "768px",
    "screen-lg": "992px",
    "screen-xl": "1280px"
  },
  "minHeight": {
    "0": "0",
    "full": "100%",
    "screen": "100vh"
  },
  "minWidth": {
    "0": "0",
    "full": "100%"
  },
  "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"
  },
  "opacity": {
    "0": "0",
    "25": "0.25",
    "50": "0.5",
    "75": "0.75",
    "100": "1"
  },
  "order": {
    "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"
  },
  "padding": {
    "xsm": "0.4rem",
    "sm": "0.8rem",
    "md": "1.2rem",
    "lg": "1.6rem",
    "xlg": "2rem",
    "xxlg": "2.4rem"
  },
  "placeholderColor": {
    "primary": {
      "10": "var(--primary-10)",
      "20": "var(--primary-20)",
      "30": "var(--primary-30)",
      "40": "var(--primary-40)",
      "50": "var(--primary-50)",
      "60": "var(--primary-60)",
      "70": "var(--primary-70)",
      "80": "var(--primary-80)",
      "90": "var(--primary-90)",
      "default": "var(--primary)",
      "dark": "var(--primary-dark)"
    },
    "secondary": {
      "10": "var(--secondary-10)",
      "20": "var(--secondary-20)",
      "30": "var(--secondary-30)",
      "40": "var(--secondary-40)",
      "50": "var(--secondary-50)",
      "60": "var(--secondary-60)",
      "70": "var(--secondary-70)",
      "80": "var(--secondary-80)",
      "90": "var(--secondary-90)",
      "default": "var(--secondary)",
      "dark": "var(--secondary-dark)"
    },
    "neutral": {
      "01": "var(--neutral-01)",
      "02": "var(--neutral-02)",
      "03": "var(--neutral-03)",
      "04": "var(--neutral-04)"
    },
    "success": "var(--success)",
    "error": "var(--error)",
    "alert": "var(--alert)"
  },
  "stroke": {
    "current": "currentColor"
  },
  "strokeWidth": {
    "0": "0",
    "1": "1",
    "2": "2"
  },
  "width": {
    "auto": "auto",
    "xsm": "0.4rem",
    "sm": "0.8rem",
    "md": "1.2rem",
    "lg": "1.6rem",
    "xlg": "2rem",
    "xxlg": "2.4rem",
    "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"
  },
  "zIndex": {
    "0": "0",
    "10": "10",
    "20": "20",
    "30": "30",
    "40": "40",
    "50": "50",
    "auto": "auto"
  },
  "gap": {
    "xsm": "0.4rem",
    "sm": "0.8rem",
    "md": "1.2rem",
    "lg": "1.6rem",
    "xlg": "2rem",
    "xxlg": "2.4rem"
  },
  "gridTemplateColumns": {
    "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))",
    "none": "none"
  },
  "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"
  },
  "gridColumnStart": {
    "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"
  },
  "gridColumnEnd": {
    "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"
  },
  "gridTemplateRows": {
    "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"
  },
  "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"
  },
  "gridRowStart": {
    "1": "1",
    "2": "2",
    "3": "3",
    "4": "4",
    "5": "5",
    "6": "6",
    "7": "7",
    "auto": "auto"
  },
  "gridRowEnd": {
    "1": "1",
    "2": "2",
    "3": "3",
    "4": "4",
    "5": "5",
    "6": "6",
    "7": "7",
    "auto": "auto"
  },
  "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"
  },
  "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"
  },
  "rotate": {
    "0": "0",
    "45": "45deg",
    "90": "90deg",
    "180": "180deg",
    "-180": "-180deg",
    "-90": "-90deg",
    "-45": "-45deg"
  },
  "translate": {
    "xsm": "0.4rem",
    "sm": "0.8rem",
    "md": "1.2rem",
    "lg": "1.6rem",
    "xlg": "2rem",
    "xxlg": "2.4rem",
    "-xsm": "-0.4rem",
    "-sm": "-0.8rem",
    "-md": "-1.2rem",
    "-lg": "-1.6rem",
    "-xlg": "-2rem",
    "-xxlg": "-2.4rem",
    "-full": "-100%",
    "-1/2": "-50%",
    "1/2": "50%",
    "full": "100%"
  },
  "skew": {
    "0": "0",
    "3": "3deg",
    "6": "6deg",
    "12": "12deg",
    "-12": "-12deg",
    "-6": "-6deg",
    "-3": "-3deg"
  },
  "transitionProperty": {
    "none": "none",
    "all": "all",
    "default": "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
    "colors": "background-color, border-color, color, fill, stroke",
    "opacity": "opacity",
    "shadow": "box-shadow",
    "transform": "transform"
  },
  "transitionTimingFunction": {
    "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)"
  },
  "transitionDuration": {
    "75": "75ms",
    "100": "100ms",
    "150": "150ms",
    "200": "200ms",
    "300": "300ms",
    "500": "500ms",
    "700": "700ms",
    "1000": "1000ms"
  }
}

Dentro de la raíz crear el archivo babel-plugin-macros.config.js Tailwind.macros permite que todas las configuraciones de tailwind puedan usarse en styled components
```
module.exports = {
  tailwind: {
    config: "./src/tailwind/config.js",
  styled: "styled-components"
  }
};
```
Configurar React para que funcione con tailwind - Ir a package.json - Agregar craco en vez de react-script
```
// "start":yarn start
"start": craco start
```

Agregar global.css en la raiz e importarlo en el index.tsx

/* purgecss start ignore */
@tailwind base;
/* purgecss end ignore */

@import url("https://fonts.googleapis.com/css?family=Lato:400,700,900&display=swap");

:root {
  --background-01: #ebf1f5;
  --background-02: #f3f4f6;
  --background-03: #f9fbff;
  --background-04: #f7f7fe;
  --background-05: #f2f9ff;
  --disabled-background: #e6edf2;

  --primary: #2a3247;
  --primary-dark: #141822;
  --primary-90: #7373f7;
  --primary-80: #8282f8;
  --primary-70: #a1a1fa;
  --primary-60: #b1b1fa;
  --primary-50: #c1c1fb;
  --primary-40: #d0d0fc;
  --primary-30: #e0e0fd;
  --primary-20: #efeffe;
  --primary-10: #f7f7ff;

  --secondary: #6363f6;
  --secondary-dark: #5050e7;
  --secondary-90: #7373f7;
  --secondary-80: #8282f8;
  --secondary-70: #a1a1fa;
  --secondary-60: #b1b1fa;
  --secondary-50: #c1c1fb;
  --secondary-40: #d0d0fc;
  --secondary-30: #e0e0fd;
  --secondary-20: #efeffe;
  --secondary-10: #f7f7ff;

  --neutral-01: #b0c0ca;
  --neutral-02: #748e98;
  --neutral-03: #4a4a4a;
  --neutral-04: #ffffff;

  --success: #22aa00;
  --error: #f10a32;
  --alert: #ffc541;

  --disabled-text: #828594;
}

html,
body {
  @apply font-sans;
}

html {
  font-size: 62.5%;
}

body {
  @apply text-neutral-02 bg-01 font-regular text-body;
}

h1,
h2,
h3,
h4,
h5,
h6,
b,
strong {
  @apply font-bold;
}

a {
  @apply text-primary;
}

input {
  @apply font-sans;
}

*,
*::before,
*::after {
  outline: none;
  transition: background 0.2s ease-in-out;
}

span,
a,
div,
label,
h1,
h2,
h3,
h4,
h5,
h6,
*::before,
*::after {
  word-break: break-word;
}

div[id^="__lpform_"] {
  display: none !important;
}

/* purgecss start ignore */
@tailwind components;
/* purgecss end ignore */
  
@tailwind utilities;

cafeta-components

@everything-registry/sub-chunk-1284 @zalastax/nolb-caf

1.0.2-alpha.0

4 years ago