https://github.com/simon-he95/transformtotailwindcss

online playground that transform css to tailwindcss
https://github.com/simon-he95/transformtotailwindcss

tailwindcss transform-to-tailwindcss

Last synced: 10 days ago
JSON representation

online playground that transform css to tailwindcss

• Host: GitHub
• URL: https://github.com/simon-he95/transformtotailwindcss
• Owner: Simon-He95
• License: mit
• Created: 2023-05-19T11:32:47.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-07-11T19:12:33.000Z (4 months ago)
• Last Synced: 2024-09-17T23:50:01.342Z (about 2 months ago)
• Topics: tailwindcss, transform-to-tailwindcss
• Language: Vue
• Homepage: https://to-tailwindcss.netlify.app/
• Size: 34.3 MB
• Stars: 6
• Watchers: 1
• Forks: 1
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: license

Awesome Lists containing this project

README

        






 English | 简体中文


This library is to convert css to tailwindcss. [tailwindcss](https://tailwindcss.com/) can reuse styles better to reduce the packaging volume, which can be converted as a performance optimization method, and it can also make it easier for old projects to upgrade to tailwindcss. If you want to use [unocss](https://github.com/unocss/unocss), you can use [transformToUnocss](https://github.com/Simon-He95/transformToUnocss).

## 📦 Install

```

  npm i -g transform-to-tailwindcss

```

## 🦄 cli

```

  ## command: totailwindcss + directory

  totailwindcss playground

  ## revoke: totailwindcss + directory + --revert

  totailwindcss payground --revert

```

## 🌈 Usage

Vite

```ts

// vite.config.ts

import { vitePluginTransformTotailwindcss } from 'transform-to-tailwindcss'

export default defineConfig({

  plugins: [vitePluginTransformTotailwindcss(/* options */)],

})

```




Rollup

```ts

// rollup.config.js

import { resolve } from 'node:path'

import { rollupTransformTotailwindcss } from 'transform-to-tailwindcss'

export default {

  plugins: [rollupTransformTotailwindcss(/* options */)],

}

```




Webpack

```ts

// webpack.config.js

module.exports = {

  /* ... */

  plugins: [

    require('transform-to-tailwindcss').webpackTransformTotailwindcss({

      /* options */

    }),

  ],

}

```




Vue CLI

```ts

// vue.config.js

module.exports = {

  configureWebpack: {

    plugins: [

      require('transform-to-tailwindcss').webpackTransformTotailwindcss({

        /* options */

      }),

    ],

  },

}

```




Esbuild

```ts

// esbuild.config.js

import { build } from 'esbuild'

import { esbuildTransformTotailwindcss } from 'transform-to-tailwindcss'

build({

  plugins: [esbuildTransformTotailwindcss(/* options */)],

})

```

## ⭐ Feature

- support css in '.html' | '.tsx' | '.vue' | '.astro' | '.svelte' to tailwindcss

- support sass less stylus convert

- support vite | rollup | webpack | vue-cli | esbuild

- vscode extension [To tailwindcss](https://github.com/Simon-He95/totailwindcss)

## 🚁 More

- [transform-to-tailwindcss-core](https://github.com/Simon-He95/transform-to-tailwindcss-core) - Provides the ability to convert css to tailwindcss on the browser side

## Before

![before](/assets/before.png)

## After

![after](/assets/after.png)

## :coffee:

[buy me a cup of coffee](https://github.com/Simon-He95/sponsor)

## License

[MIT](./license)