Skip to content

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

Notifications You must be signed in to change notification settings

etareduction/clamp-tailwind

Repository files navigation

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

How it works:

  • Install the CLI tool from NPM registry:

    npm i -g clamp-tailwind
  • Run it providing path to directory that contains .tsx source files:

    clamp-tailwind path/to/directory
  • Such input source code:

    // Button.tsx
    
    import type { FC } from 'react'
    
    const Button: FC = () => <div className='w-10 h-10 bg-red-900' />
    
    export default Button

    Will result in such output:

    // Button.tsx
    
    import styles from './Button.module.css'
    import type { FC } from 'react'
    
    const Button: FC = () => <div className={styles['div']} />
    
    export default Button 
    /* Button.module.css */
    
    .div {
        @apply w-10 h-10 bg-red-900;
    }

Jest tests included:

npm test

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published