How can i migrate tailwind to unocss

[artemRepetskyi]

When I tried to transfer my styles through the theme, the margins and paddings did not work for me, they were in pixels and uno there rem

import {
  defineConfig,
  presetAttributify,
  presetTypography,
  presetUno,
  presetWind,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'
export default defineConfig({
  shortcuts: [
    ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
    ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
  ],
  theme: {
      container: {
        center: true,
        padding: "15px"
      },
      screens: {
        xs: "100%",
        sm: "576px",
        md: "768px",
        lg: "1020px",
        xl: "1190px",
      },
      fontFamily: {
        main: ["Roboto", "sans-serif"]
      },
      colors: {
        // transparent: "transparent",
        // colors
        base: {
          0: "#ffffff",
          1: '#000000',
        },
        regular: {
          0: "#221e1f", 
          1: "#05ace2",
        },
        rare: {
          0: "#999797",
          1: '#f1f1f1',
          2: '#363233',
          3: '#f8f8f8',
        },
        rarly: {
          0: "#D3D3D3",
          1: '#9B9B9B',
          2: '#676767'
        },
        pallete: {
          0: '#e93737',
        }
      },
      borderRadius: {
        1: '1px',
        5: '5px',
        4: '4px',
      },
      boxShadow: {
        0: '2px 3px 15px rgba(0, 0, 0, 0.3)',
        1: '0 0 7px 0 rgb(34,30,31, 0.1)',
      },
      zIndex: {
        1: '1',
        2: '2',
        3: '3',
        4: '4',
        5: '5',
        99: '99',
        100: '100',
      },
      spacing: {
        0: '0',
        '7.5': '7.5px',
        15: '15px',
        5: '5px',
        3: '3px',
        10: '10px',
        365: '365px',
        16: '16px',
        12: '12px',
        540: '540px',
        395: '395px',
        265: '265px',
        14: '14px',
        80: '80px',
        24: '24px',
        130: '130px',
        300: '300px',
        20: '20px',
        110: '110px',
        35: '35px',
        65: '65px',
        400: '400px',
        120: '120px',
        22: '22px',
        45: '45px',
        25: '25px',
        95: '95px',
        580: '580px',
        140: '140px',
        65: '65px',
        1: '1px',
        7: '7px',
        50: '50px',
        8: '8px',
        18: '18px',
        2: '2px',
        40: '40px',
        530: '530px',
        30: '30px',
      },
      fontSize: theme => theme("spacing"),
      maxWidth: theme => theme("spacing"),
      maxHeight: theme => theme("spacing"),
      minWidth: theme => theme("spacing"),
      minHeight: theme => theme("spacing"),
      // 
      extend: {
        borderWidth: theme => theme("spacing"),
      },
    }
  presets: [
    presetUno(),
  
    presetAttributify(),
    presetTypography(),
    presetWebFonts({
      fonts: {
        sans: 'DM Sans',
        serif: 'DM Serif Display',
        mono: 'DM Mono',
      },
    }),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
})

But tailwind no migrate

[chu121su12]

Follow the discussion in #1013. Mostly this is due to the theme object in unocss is not the same as it might be used in tailwind, especially the container key.

[blowsie]

Follow the discussion in #1013. Mostly this is due to the theme object in unocss is not the same as it might be used in tailwind, especially the container key.

extend key would also be invalid in this example, since uno uses defaultsDeep by default

Also I don't think expressions are supported eg. fontSize: theme => theme("spacing"),

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.