Skip to content

KelseyShi/css-to-tailwind

 
 

Repository files navigation

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

About

Convert CSS code to Tailwindcss syntax in real time

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 98.5%
  • Other 1.5%