css-to-tailwind-translator

CSS To Tailwind

Convert CSS code to Tailwindcss syntax in real time

convert online: https://hymhub.github.io/css-to-tailwind

Use npm

Install

npm i css-to-tailwind-translator

Usage

import { CssToTailwindTranslator } from "css-to-tailwind-translator";

const cssCode = `body {
  width: 100%;
  height: 50%;
  margin: 0 !important;
  background-color: transparent;
}`;

const conversionResult = CssToTailwindTranslator(cssCode);

console.log(conversionResult);
// {
//   code: 'OK',
//   data: [
//     {
//       selectorName: 'body',
//       resultVal: 'w-full h-1/2 !m-0 bg-transparent'
//     }
//   ]
// }

Configuration

CssToTailwindTranslator: (code: string, config?: TranslatorConfig)

TranslatorConfig

Attribute	Description	Type
prefix	tailwind configuration prefix	string
useAllDefaultValues	Use tailwind all default values(The default is true)	boolean
customTheme	Custom conversion of preset property values	CustomTheme

CustomTheme

export interface CustomTheme
  extends Record<string, undefined | Record<string, string>> {
  media?: Record<string, string>;
  "backdrop-blur"?: Record<string, string>;
  "backdrop-brightness"?: Record<string, string>;
  "backdrop-contrast"?: Record<string, string>;
  "backdrop-grayscale"?: Record<string, string>;
  "backdrop-hue-rotate"?: Record<string, string>;
  "backdrop-invert"?: Record<string, string>;
  "backdrop-opacity"?: Record<string, string>;
  "backdrop-saturate"?: Record<string, string>;
  "backdrop-sepia"?: Record<string, string>;
  blur?: Record<string, string>;
  brightness?: Record<string, string>;
  contrast?: Record<string, string>;
  grayscale?: Record<string, string>;
  "hue-rotate"?: Record<string, string>;
  invert?: Record<string, string>;
  saturate?: Record<string, string>;
  sepia?: Record<string, string>;
  scale?: Record<string, string>;
  rotate?: Record<string, string>;
  translate?: Record<string, string>;
  skew?: Record<string, string>;
  // custom more...
}

CustomTheme Instructions

1.media

In the customTheme configuration, media can customize responsive breakpoints, for example

customTheme

{
  "media": {
    "@media (min-width: 1800px)": "3xl"
  }
}

css code

@media (min-width: 1800px) {
  .my-media {
    display: flex;
    align-items: center;
  }
}

out code

@media(min-width:1800px)-->.my-media Result Code:
3xl:flex 3xl:items-center

2.backdrop-filter, filter, transform

How to customize backdrop-filter, filter, transform in customTheme

The sub-attributes in these three attribute values do not need to be prefixed when customizing, for example

customTheme

{
  "backdrop-blur": {
    "99999px": "super-big"
  },
  "rotate": {
    "99deg": "crooked"
  }
}

css code

.my-style {
  transform: rotate(99deg);
  backdrop-filter: blur(99999px);
}

out code

.my-style Result Code:
transform rotate-crooked backdrop-filter backdrop-blur-super-big

3.Customize any property value alias in customTheme

Customizing other properties in customTheme needs to be prefixed, for example

customTheme

{
  "width": {
    "288px": "w-custom" // Need to add `w-` prefix
  },
  "box-shadow": {
    "10px 10px 5px #888888": "box-shadow-custom" // Need to add `box-shadow-` prefix
  }
}

css code

.my-style {
  box-shadow: 10px 10px 5px #888888;
  width: 288px;
}

out code

.my-style Result Code:
box-shadow-custom w-custom