https://github.com/etareduction/clamp-tailwind

CLI tool that merges your react/tailwind codebase className's into per-component CSS modules.
https://github.com/etareduction/clamp-tailwind

babel css css-modules cssmodules react reactjs tailwindcss

Last synced: about 1 month ago
JSON representation

CLI tool that merges your react/tailwind codebase className's into per-component CSS modules.

• Host: GitHub
• URL: https://github.com/etareduction/clamp-tailwind
• Owner: etareduction
• Created: 2022-05-12T11:33:09.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-06-08T06:39:54.000Z (over 2 years ago)
• Last Synced: 2024-10-14T02:23:10.542Z (3 months ago)
• Topics: babel, css, css-modules, cssmodules, react, reactjs, tailwindcss
• Language: TypeScript
• Homepage:
• Size: 157 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## **WARNING!** Currently it overwrites source files, that's intentional. Make sure to save backups!

### How it works:

- Install the CLI tool from NPM registry:

    ```bash

    npm i -g clamp-tailwind

    ```

- Run it providing path to directory that contains `.tsx` source files:

    ```bash

    clamp-tailwind path/to/directory

    ```

- Such input source code:

    ```tsx 

    // Button.tsx

  

    import type { FC } from 'react'

    

    const Button: FC = () => 


    

    export default Button

    ```

    Will result in such output:

    ```tsx

    // Button.tsx

  

    import styles from './Button.module.css'

    import type { FC } from 'react'

    

    const Button: FC = () => 


    

    export default Button 

    ```

    ```css

    /* Button.module.css */

  

    .div {

        @apply w-10 h-10 bg-red-900;

    }

    ```

---


Jest tests included:

```bash

npm test

```