The config file for the tachyons_to_tailwind.rb migration script. Useful for migrating Tachyons to Tailwind CSS. See https://dev.to/nejremeslnici/migrating-tachyons-to-tailwind-css-part-i-ich for more context.

tachyons_to_tailwind.yml

# media query: tachyons postfix (-mq) => tailwind prefix (mq:)
variants:
  ns: sm
  l: lg

# tachyons_class => tailwind_class
replacements:

  # paddings
  pa0: p-0
  pa1: p-0-5
  pa2: p-0-75
  pa3: p-1
  pa4: p-1-5
  pa5: p-2
  pa6: p-3
  pa7: p-4
  pa8: p-6
  pa9: p-8
  pa10: p-12
  pa11: p-16
  pa12: p-24
  pa13: p-32
  pa14: p-48
  pa15: p-64

  pl0: pl-0
  pl1: pl-0-5
  pl2: pl-0-75
  pl3: pl-1
  pl4: pl-1-5
  pl5: pl-2
  pl6: pl-3
  pl7: pl-4
  pl8: pl-6
  pl9: pl-8
  pl10: pl-12
  pl11: pl-16
  pl12: pl-24
  pl13: pl-32
  pl14: pl-48
  pl15: pl-64

  pr0: pr-0
  pr1: pr-0-5
  pr2: pr-0-75
  pr3: pr-1
  pr4: pr-1-5
  pr5: pr-2
  pr6: pr-3
  pr7: pr-4
  pr8: pr-6
  pr9: pr-8
  pr10: pr-12
  pr11: pr-16
  pr12: pr-24
  pr13: pr-32
  pr14: pr-48
  pr15: pr-64

  pt0: pt-0
  pt1: pt-0-5
  pt2: pt-0-75
  pt3: pt-1
  pt4: pt-1-5
  pt5: pt-2
  pt6: pt-3
  pt7: pt-4
  pt8: pt-6
  pt9: pt-8
  pt10: pt-12
  pt11: pt-16
  pt12: pt-24
  pt13: pt-32
  pt14: pt-48
  pt15: pt-64

  pb0: pb-0
  pb1: pb-0-5
  pb2: pb-0-75
  pb3: pb-1
  pb4: pb-1-5
  pb5: pb-2
  pb6: pb-3
  pb7: pb-4
  pb8: pb-6
  pb9: pb-8
  pb10: pb-12
  pb11: pb-16
  pb12: pb-24
  pb13: pb-32
  pb14: pb-48
  pb15: pb-64
  pb16: pb-96

  ph0: px-0
  ph1: px-0-5
  ph2: px-0-75
  ph3: px-1
  ph4: px-1-5
  ph5: px-2
  ph6: px-3
  ph7: px-4
  ph8: px-6
  ph9: px-8
  ph10: px-12
  ph11: px-16
  ph12: px-24
  ph13: px-32
  ph14: px-48
  ph15: px-64

  pv0: py-0
  pv1: py-0-5
  pv2: py-0-75
  pv3: py-1
  pv4: py-1-5
  pv5: py-2
  pv6: py-3
  pv7: py-4
  pv8: py-6
  pv9: py-8
  pv10: py-12
  pv11: py-16
  pv12: py-24
  pv13: py-32
  pv14: py-48
  pv15: py-64

  # margins
  ma0: m-0
  ma1: m-0-5
  ma2: m-0-75
  ma3: m-1
  ma4: m-1-5
  ma5: m-2
  ma6: m-3
  ma7: m-4
  ma8: m-6
  ma9: m-8
  ma10: m-12
  ma11: m-16
  ma12: m-24
  ma13: m-32
  ma14: m-48
  ma15: m-64
  ma-auto: m-auto

  ml0: ml-0
  ml1: ml-0-5
  ml2: ml-0-75
  ml3: ml-1
  ml4: ml-1-5
  ml5: ml-2
  ml6: ml-3
  ml7: ml-4
  ml8: ml-6
  ml9: ml-8
  ml10: ml-12
  ml11: ml-16
  ml12: ml-24
  ml13: ml-32
  ml14: ml-48
  ml15: ml-64
  ml-auto: ml-auto

  mr0: mr-0
  mr1: mr-0-5
  mr2: mr-0-75
  mr3: mr-1
  mr4: mr-1-5
  mr5: mr-2
  mr6: mr-3
  mr7: mr-4
  mr8: mr-6
  mr9: mr-8
  mr10: mr-12
  mr11: mr-16
  mr12: mr-24
  mr13: mr-32
  mr14: mr-48
  mr15: mr-64
  mr-auto: mr-auto

  mt0: mt-0
  mt1: mt-0-5
  mt2: mt-0-75
  mt3: mt-1
  mt4: mt-1-5
  mt5: mt-2
  mt6: mt-3
  mt7: mt-4
  mt8: mt-6
  mt9: mt-8
  mt10: mt-12
  mt11: mt-16
  mt12: mt-24
  mt13: mt-32
  mt14: mt-48
  mt15: mt-64
  mt--1: -mt-px
  mt-auto: mt-auto

  mb0: mb-0
  mb1: mb-0-5
  mb2: mb-0-75
  mb3: mb-1
  mb4: mb-1-5
  mb5: mb-2
  mb6: mb-3
  mb7: mb-4
  mb8: mb-6
  mb9: mb-8
  mb10: mb-12
  mb11: mb-16
  mb12: mb-24
  mb13: mb-32
  mb14: mb-48
  mb15: mb-64
  mb16: mb-96
  mb-auto: mb-auto

  mh0: mx-0
  mh1: mx-0-5
  mh2: mx-0-75
  mh3: mx-1
  mh4: mx-1-5
  mh5: mx-2
  mh6: mx-3
  mh7: mx-4
  mh8: mx-6
  mh9: mx-8
  mh10: mx-12
  mh11: mx-16
  mh12: mx-24
  mh13: mx-32
  mh14: mx-48
  mh15: mx-64
  mh-auto: mx-auto

  mv0: my-0
  mv1: my-0-5
  mv2: my-0-75
  mv3: my-1
  mv4: my-1-5
  mv5: my-2
  mv6: my-3
  mv7: my-4
  mv8: my-6
  mv9: my-8
  mv10: my-12
  mv11: my-16
  mv12: my-24
  mv13: my-32
  mv14: my-48
  mv15: my-64
  mv-auto: my-auto

  # widths
  w0: w-0
  w1: w-0-5
  w2: w-0-75
  w3: w-1
  w4: w-1-5
  w5: w-2
  w6: w-3
  w7: w-4
  w8: w-6
  w9: w-8
  w10: w-12
  w11: w-16
  w12: w-24
  w13: w-32
  w14: w-48
  w15: w-64
  w16: w-96
  w17: w-128
  w18: w-192
  w19: w-256

  w-10: w-1/12 # not precise
  w-15: w-1/6  # not precise
  w-20: w-1/5
  w-25: w-1/4
  w-30: w-1/3 # not precise
  w-33: w-1/3
  w-38: w-2/5 # not precise
  w-40: w-2/5
  w-45: w-5/12 # not precise
  w-47: w-5/12 # not precise
  w-50: w-1/2
  w-53: w-1/2 # not precise
  w-55: w-1/2 # not precise
  w-60: w-3/5
  w-66: w-2/3
  w-70: w-2/3 # not precise
  w-75: w-3/4
  w-80: w-4/5
  w-85: w-5/6 # not precise
  w-90: w-11/12 # not precise
  w-95: w-11/12 # not precise
  w-100: w-full
  w-auto: w-auto

  maxw0: max-w-0
  maxw14: max-w-48
  maxw15: max-w-64
  maxw16: max-w-96
  maxw17: max-w-128
  maxw18: max-w-192
  maxw19: max-w-256
  maxw20: max-w-384
  # orig TW scale: xs - 7xl
  #  maxw14: max-w-3xs
  #  maxw15: max-w-2xs
  #  maxw16: max-w-sm
  #  maxw17: max-w-lg
  #  maxw18: max-w-3xl
  #  maxw19: max-w-5xl
  #  maxw20: max-w-7xl # intentionally less than maxw20

  maxw-25: max-w-1/4
  maxw-50: max-w-1/2
  maxw-75: max-w-3/4
  maxw-100: max-w-full
  maxw-none: max-w-none

  # (custom scale)
  minw0: min-w-0
  minw13: min-w-32
  minw14: min-w-48
  minw15: min-w-64
  minw16: min-w-96
  minw-100: min-w-full

  # heights
  h0: h-0
  h1: h-0-5
  h2: h-0-75
  h3: h-1
  h4: h-1-5
  h5: h-2
  h6: h-3
  h7: h-4
  h8: h-6
  h9: h-8
  h10: h-12
  h11: h-16
  h12: h-24
  h13: h-32
  h14: h-48
  h15: h-64
  h16: h-96
  h17: h-128
  h18: h-192
  h19: h-256

  h-50: h-1/2
  h-80: h-4/5
  h-100: h-full
  h-auto: h-auto

  # (custom scale)
  maxh0: max-h-0
  maxh7: max-h-4
  maxh11: max-h-16
  maxh12: max-h-24
  maxh14: max-h-48
  maxh15: max-h-64
  maxh18: max-h-192
  maxh-100: max-h-full
  maxh-none: max-h-none

  # (custom scale)
  minh0: min-h-0
  minh12: min-h-24
  minh13: min-h-32
  minh14: min-h-48
  minh15: min-h-64
  minh16: min-h-96
  minh17: min-h-128
  minh-100: min-h-full

  # clears and floats
  cf: flow-root
  cb: clear-both
  fl: float-left
  fr: float-right
  fn: float-none

  # borders and outlines
  bn: border-none
  ba: border
  bt: border-t
  br: border-r
  bb: border-b
  bl: border-l

  br1: rounded-sm
  br2: rounded
  br3: rounded-lg
  br4: rounded-2xl
  br5: rounded-3xl # intentionally less than br5
  br-100: rounded-full

  br--bottom: rounded-t-none
  br--top: rounded-b-none
  br--right: rounded-l-none
  br--left: rounded-r-none

  b--dotted: border-dotted
  b--dashed: border-dashed
  b--solid: border-solid

  bw0: border-0
  bw1: border-2
  bw2: border-3
  bw3: border-4
  bw4: border-6
  bw5: border-8
  bw6: border-12
  bw7: border-16

  bt-0: border-t-0
  bt-1: border-t-2
  bt-4: border-t-6
  bb-0: border-b-0
  bb-1: border-b-2
  br-1: border-r-2
  br-4: border-r-6
  bl-1: border-l-2

  outline-0: outline-0

  # Z-index
  z-0: z-0
  z-1: z-10
  z-2: z-20
  z-3: z-30
  z-4: z-40
  z-5: z-50
  z-100: z-100
  z-max: z-max

  # fonts
  f0: text-none
  f1: text-5xl
  f2: text-4xl
  f3: text-2xl
  f4: text-xl
  f5: text-base
  f6: text-sm
  f7: text-xs
  f8: text-2xs
  f9: text-3xs
  f-5: text-7xl

  # Text overflow
  truncate: truncate

  # Text decorations
  underline: underline
  no-underline: no-underline
  strike: line-through

  # Cursors
  pointer: cursor-pointer
  cursor-normal: cursor-default
  cursor-help : cursor-help
  events-none: pointer-events-none
  events-auto: pointer-events-auto

  # line heights
  lh-solid: leading-none
  lh-normal: leading-tight # intentionally bigger leading
  lh-copy: leading-normal
  lh-title: leading-tight
  lh-spacy: leading-loose

  # Opacity
  o-0: opacity-0
  o-20: opacity-20
  o-30: opacity-30
  o-40: opacity-40
  o-50: opacity-50
  o-60: opacity-60
  o-70: opacity-70
  o-80: opacity-80
  o-90: opacity-90
  o-100: opacity-100
  ho-100: hover:opacity-100

  # Text transforms
  ttc: capitalize
  ttu: uppercase

  # Text Aligns
  tl: text-left
  tr: text-right
  tc: text-center

  # font weights
  normal: font-normal
  b: font-bold
  fw1: font-thin
  fw2: font-extralight
  fw3: font-light
  fw4: font-normal
  fw5: font-medium
  fw6: font-semibold
  fw7: font-bold
  fw8: font-extrabold
  fw9: font-black

  # Letter spacings
  tracked-tighter: tracking-tight
  tracked-tight: tracking-tighter

  # font styles
  arial: font-sans
  times: font-serif
  i: italic
  fs-normal: not-italic

  # White space
  ws-normal: whitespace-normal
  nowrap: whitespace-nowrap
  pre: whitespace-pre
  pre-line: whitespace-pre-line

  # Box shadows
  # Outer shadows
  shadow-1: shadow-md
  shadow-2: shadow-md
  shadow-3: shadow-md
  shadow-4: shadow-md
  shadow-5: shadow-lg
  shadow-9: shadow-md
  shadow-11: shadow-md
  shadow-12: shadow-lg
  shadow-14: shadow-3xl
  shadow-15: shadow-md
  shadow-16: shadow-4xl
  shadow-17: shadow-5xl
  shadow-18: shadow-2xl
  shadow-b: shadow-grey
  shadow-w: shadow-white
  shadow-b2: shadow-grey-2
  shadow-w2: shadow-white-2

  # Inner shadows
  shadow-inset1: shadow-inner
  shadow-inset2: shadow-inner
  shadow-inset3: shadow-inner
  shadow-inset4: shadow-inner-1
  shadow-inset5: shadow-inner-2
  shadow-inset6: shadow-inner-3
  shadow-13: shadow-inner-border

  # Text shadows
  ts0: shadow-text-none
  ts1: shadow-text-default
  ts2: shadow-text-sm
  ts4: shadow-text-white
  ts6: shadow-text-lg

  # Filter shadows
  filter-shadow1: shadow-filter-grey
  filter-shadow2: shadow-filter-white
  filter-shadow4: shadow-filter-black

  # List style types
  list: list-none
  disc: list-disc
  decimal: list-decimal
  square: list-square

  # Inputs resize
  resize-none: resize-none
  resize-vertical: resize-y

  # Position
  absolute: absolute
  fixed: fixed
  static: static
  relative: relative

  # positioning - top/bottom/right/left
  bottom-0: bottom-0
  bottom-1: bottom-4 # collision
  bottom-2: bottom-8 # collision
  bottom-5: bottom-20 # collision
  bottom--1: -bottom-4
  bottom--2: -bottom-8
  bottom--5: -bottom-20
  bottom-05: bottom-2 # collision with self!

  bottom-50: bottom-1/2
  bottom-100: bottom-full

  left-0: left-0
  left-05: left-2
  left-3: left-12 # collision
  left-4: left-16 # collision
  left-5: left-20 # collision
  left-6: left-24 # collision
  left--0-5: -left-2
  left--1-5: -left-6
  left--3: -left-12
  left--4: -left-16
  left-1: left-4 # collision + collision with self!
  left-2: left-8 # collision + collision with self!

  left-25: left-1/4
  left-40: left-2/5 # collision
  left-45: left-45/100 # do not use this
  left-50: left-1/2
  left-65: left-65/100 # do not use this
  left-100: left-full

  right-0: right-0
  right-2: right-8 # collision
  right-3: right-12 # collision
  right-4: right-16 # collision
  right--0-5: -right-2
  right--1: -right-4
  right--2: -right-8
  right-05: right-2 # collision with self!
  right-1: right-4 # collision + collision with self!

  right-25: right-1/4
  right-50: right-1/2
  right-100: right-full

  top-0: top-0
  top-2: top-8 # collision
  top-3: top-12 # collision
  top-4: top-16 # collision
  top-5: top-20 # collision
  top-6: top-24 # collision
  top--0-5: -top-2
  top--1: -top-4
  top--1-5: -top-6
  top--2: -top-8
  top--5: -top-20
  top-05: top-2 # collision with self!
  top-1: top-4 # collision + collision with self!

  top-20: top-1/5 # collision
  top-30: top-3/10 # do not use this
  top-40: top-2/5 # collision
  top-50: top-1/2
  top-55: top-55/100 # do not use this
  top-100: top-full

  # flexbox (without "display: flex")
  flex-auto: flex-auto
  flex-column: flex-col
  flex-column-reverse: flex-col-reverse
  flex-row: flex-row
  flex-row-reverse: flex-row-reverse
  flex-wrap: flex-wrap
  flex-nowrap: flex-nowrap

  items-start: items-start
  items-end: items-end
  items-center: items-center
  items-baseline: items-baseline
  items-stretch: items-stretch

  justify-start: justify-start
  justify-end: justify-end
  justify-center: justify-center
  justify-between: justify-between
  justify-around: justify-around

  content-start: content-start
  content-center: content-center

  order-0: order-none
  order--1: order-first # hopefully this will work the same

  flex-basis-1: flex-basis-full
  flex-basis-2: flex-basis-1/2
  flex-basis-3: flex-basis-1/3
  flex-basis-4: flex-basis-1/4

  flex-grow-1: flex-grow
  flex-shrink-0: flex-shrink-0

  # overflows
  overflow-auto: overflow-auto
  overflow-hidden: overflow-hidden
  overflow-x-auto: overflow-x-auto
  overflow-x-hidden: overflow-x-hidden
  overflow-x-scroll: overflow-x-scroll
  overflow-y-auto: overflow-y-auto
  overflow-y-scroll: overflow-y-scroll

  # vertical alignments
  v-base: align-baseline
  v-btm: align-bottom
  v-mid: align-middle
  v-text-top: align-text-top
  v-top: align-top

  # columns
  col-2: columns-2
  col-3: columns-3
  col-4: columns-4
  gap-0: gap-x-0 # collision
  gap-9: gap-x-36 # collision

  # Visibility
  visible: visible
  hidden: invisible

  # Backgrounds
  bg-none: bg-none
  img-cover: object-cover
  img-center: object-center
  img-top: object-center-top

  # transisions - replaced by multiple classes
  tran-all-1: [transition-all, duration-1000]
  tran-all-3: [transition-all, duration-300]
  tran-all-3-lin: [transition-all, duration-300, ease-linear]
  tran-all-4: [transition-all, duration-500] # intentionally more than 400ms
  tran-all-5: [transition-all, duration-500]
  tran-top-5: [transition-top, duration-500]
  tran-op-3: [transition-opacity, duration-300]
  tran-col-3: [transition-colors, duration-300]
  tran-bg-3: [transition-colors, duration-300] # intentionally changed to all colours
  tran-trans-3: [transition-transform, duration-300]
  tran-show-3: [transition-all, duration-300] # intentionally changed to all properties
  tran-w-5-e: [transition-max-w, duration-500, ease-in-out]
  tran-h-3-lin: [transition-max-h, duration-300, ease-linear]

  # transforms (replaced by multiple TW classes)
  scale-09: [transform, scale-90]
  scale-15: [transform, scale-150]
  scaleY-05: [transform, scale-y-50]
  scaleY-075: [transform, scale-y-75]

  rot--15: [transform, -rotate-12] # intentionally less than -15
  rot-30: [transform, rotate-30]
  rot-40: [transform, rotate-45] # intentionally more than 40
  rot-45: [transform, rotate-45]
  rot-90: [transform, rotate-90]
  rot--90: [transform, -rotate-90]
  rot-180: [transform, rotate-180]
  rot-270: [transform, -rotate-90] # should be the same

  transY--10: [transform, -translate-y-1/10]
  trans--50: [transform, -translate-x-1/2, -translate-y-1/2]
  transX--50: [transform, -translate-x-1/2]
  transY--50: [transform, -translate-y-1/2]
  transX-50: [transform, translate-x-1/2]
  transY-50: [transform, translate-y-1/2]

  flip-h: [transform, -scale-x-100]
  zoom: [transform, hover:scale-110]

  # Box Sizing
  content-box: box-content

  # components
  horizontal-centering: horizontal-centering
  vertical-centering: vertical-centering
  centering-both: centering-both
  aspect-ratio--16x9: aspect-ratio--16x9
  aspect-ratio--7x4: aspect-ratio--7x4
  dim: dim
  link: link
  link-txt: link-txt
  hide-child: hide-child
  hide-child-db: hide-child-db
  hide-child-shrink-font: hide-child-shrink-font
  child: child
  border-underline-thin: border-underline-thin
  border-underline-thick: border-underline-thick
  border-underline-empty: border-underline-empty
  underline-hover: hover:underline
  no-underline-hover: hover:no-underline

  # display
  db: block
  di: inline
  dib: inline-block
  dn: hidden
  dt: table
  dt-row: table-row
  dtc: table-cell
  flex: flex
  inline-flex: inline-flex

# these (Tachyons) classes will be ignored during migrations
# NOTE: this is just a sample and corresponds to the state after all migrations were done. 
# Before you begin with your own migrations, remove all classes here and add the identical / colliding classes
# here as you migrate them.
already_migrated:
  - absolute
  - arial
  - b
  - z-max

  # components
  - horizontal-centering
  - vertical-centering
  - centering-both
  - aspect-ratio--16x9
  - aspect-ratio--7x4
  - dim
  - link
  - link-txt

  # colliding classes - do not remove from here!
  - bottom-1
  - bottom-2
  - bottom-5
  - gap-0
  - gap-9
  - hidden
  - i # (this is not a collision but migration with too many manual corrections needed)
  - left-1
  - left-2
  - left-3
  - left-4
  - left-5
  - left-6
  - left-40
  - right-1
  - right-2
  - right-3
  - right-4
  - top-1
  - top-2
  - top-3
  - top-4
  - top-5
  - top-6
  - top-20
  - top-40
  - zoom # (not a collision but too many false positives)

# whole file / dir exceptions
glob_exceptions:
  - app/views/vanity/*

# concrete class exceptions - file => tachyons_class => [line_numbers]
# if [line_numbers] is empty, ignore whole file for the given class
exceptions:
  app/helpers/tags_helper.rb:
    normal: []
  app/javascript/src/controllers/comments_controller.js:
    list: []
  app/views/users/index.html.slim:
    list: [161, 162, 165, 166, 180, 184, 185, 202]