https://github.com/miklosme/css-to-tailwind

Convert plain CSS to TailwindCSS classes. Demo: https://transform.tools/css-to-tailwind
https://github.com/miklosme/css-to-tailwind

tailwind tailwindcss

Last synced: about 1 month ago
JSON representation

Convert plain CSS to TailwindCSS classes. Demo: https://transform.tools/css-to-tailwind

• Host: GitHub
• URL: https://github.com/miklosme/css-to-tailwind
• Owner: miklosme
• Created: 2020-08-03T22:53:38.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-05T10:18:36.000Z (over 1 year ago)
• Last Synced: 2024-04-16T22:22:07.062Z (7 months ago)
• Topics: tailwind, tailwindcss
• Language: CSS
• Homepage:
• Size: 1.17 MB
• Stars: 61
• Watchers: 2
• Forks: 9
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# CSS To Tailwind

Convert CSS to [TailwindCSS](https://github.com/tailwindlabs/tailwindcss) classes.

# Demo: [transform.tools/css-to-tailwind](https://transform.tools/css-to-tailwind)

## Usage

`npx css-to-tailwind ".logo { margin-bottom: 1.6rem; min-height: 4rem; display: flex; justify-content: center; }"`

The package also offers a Node API. Use that if you need custom TailwindCSS configuration. I don't have time to document it, but reading these two PRs should clarify everything:

1. [Introducing css-to-tailwind to transform.tools](https://github.com/ritz078/transform/pull/235)

2. [Adding custom config support to transform.tools](https://github.com/ritz078/transform/pull/243)

TailwindCSS can't run in a browser, because it depends on Node APIs. However this project can, by using the entry `css-to-tailwind/browser`. In this case, run TailwindCSS on the server side, if you want to use a custom Tailwind config. See the second PR above for details.

## Output

`Array<{ selector: string, tailwind: string, missing: Array>}>`

- `selector`: The selector used in the input CSS.

- `tailwind`: List of TailwindCSS classes in a single string, separated by a space.

- `missing`: The properties that can't be converted, will appear as an array of tuples.

```

[

  {

    "selector": ".logo",

    "tailwind": "flex justify-center mb-6",

    "missing": [

      [

        "min-height",

        "4rem"

      ]

    ]

  }

]

```

## License

MIT