https://github.com/hunghg255/css2tailwind

Convert CSS to Tailwindcss
https://github.com/hunghg255/css2tailwind

css css2tailwindcss npm tailwindcss

Last synced: 3 months ago
JSON representation

Convert CSS to Tailwindcss

• Host: GitHub
• URL: https://github.com/hunghg255/css2tailwind
• Owner: hunghg255
• Created: 2023-05-15T08:12:39.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-07-20T04:07:01.000Z (7 months ago)
• Last Synced: 2024-10-28T15:02:52.516Z (3 months ago)
• Topics: css, css2tailwindcss, npm, tailwindcss
• Language: TypeScript
• Homepage: https://css2tailwind-docs.vercel.app
• Size: 684 KB
• Stars: 14
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        










  A library convert css to tailwindcss





  

  

  

  

  



## Playground

[Playground](https://css2tailwind.vercel.app/css-to-tailwind)

## Extension for vscode

[css-2-tailwindcss](https://marketplace.visualstudio.com/items?itemName=hunghg255.css-2-tailwindcss&ssr=false#overview)

## Install

```bash

npm i css2tailwind@latest --save-dev

```

With `yarn`

```bash

yarn add css2tailwind@latest -D

```

## Configuration

```md

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

```

### `TranslatorConfig`

|       Attribute       |                                    Description                                     |            Type             |

| :-------------------: | :--------------------------------------------------------------------------------: | :-------------------------: |

|       `prefix`        | [tailwind configuration prefix](https://tailwindcss.com/docs/configuration#prefix) |           string            |

| `useAllDefaultValues` |                Use tailwind all default values(The default is true)                |           boolean           |

|     `customTheme`     |                    Custom conversion of preset property values                     | [CustomTheme](#customtheme) |

## Basic use

```js

import { CssToTailwind } from "css2tailwind";

const cssCode = `body {

  width: 100%;

  height: 50%;

  margin: 0 !important;

  background-color: transparent;

}`;

const conversionResult = CssToTailwind(cssCode);

console.log(conversionResult);

// {

//   code: 'OK',

//   data: [

//     {

//       selectorName: 'body',

//       resultVal: 'w-full h-1/2 !m-0 bg-transparent'

//     }

//   ]

// }

```

## `CustomTheme`

```typescript

export interface CustomTheme

  extends Record> {

  media?: Record;

  "backdrop-blur"?: Record;

  "backdrop-brightness"?: Record;

  "backdrop-contrast"?: Record;

  "backdrop-grayscale"?: Record;

  "backdrop-hue-rotate"?: Record;

  "backdrop-invert"?: Record;

  "backdrop-opacity"?: Record;

  "backdrop-saturate"?: Record;

  "backdrop-sepia"?: Record;

  blur?: Record;

  brightness?: Record;

  contrast?: Record;

  grayscale?: Record;

  "hue-rotate"?: Record;

  invert?: Record;

  saturate?: Record;

  sepia?: Record;

  scale?: Record;

  rotate?: Record;

  translate?: Record;

  skew?: Record;

  // custom more...

}

```

## CustomTheme Instructions

##### 1.media

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

customTheme

```json

{

  "media": {

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

  }

}

```

css code

```css

@media (min-width: 1800px) {

  .my-media {

    display: flex;

    align-items: center;

  }

}

```

out code

```text

@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

```json

{

  "backdrop-blur": {

    "99999px": "super-big"

  },

  "rotate": {

    "99deg": "crooked"

  }

}

```

css code

```css

.my-style {

  transform: rotate(99deg);

  backdrop-filter: blur(99999px);

}

```

out code

```text

.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

```json

{

  "width": {

    "288px": "w-custom" // Need to add `w-` prefix

  },

  "box-shadow": {

    "10px 10px 5px #888888": "box-shadow-custom" // Need to add `box-shadow-` prefix

  },

  "font-size": { // Need to add `font-size-` prefix

    "20px: "2xl",

    "1.25rem": "2xl"

  }

}

```

css code

```css

.my-style {

  box-shadow: 10px 10px 5px #888888;

  width: 288px;

  font-size: 20px;

}

```

out code

```text

.my-style Result Code:

box-shadow-custom w-custom text-2xl

```

### About



Gia Hung – [hung.hg](https://hung.thedev.id)