What does the CSS Modules to Tailwind skill do?
Converting-css-modules-to-tailwind is a skill in the awesome-cursor-skills repository. It guides an AI coding agent through replacing .module.css and .module.scss files with Tailwind utility classes in four steps: inventory, convert, handle module patterns such as composes, and clean up the leftover imports.
The skill sits in a curated list of Cursor skills. It migrates a component's .module.css or .module.scss file into Tailwind utility classes, and it can be invoked directly because it is marked user-invocable.
The four step workflow
- Inventory the module: list its classes before touching anything.
- Convert each class into utility classes.
- Handle the CSS Modules specific patterns.
- Clean up: remove the styles import, delete the module file, update any barrel index.ts, search for other imports, then run the app and check it visually.
Module patterns it knows how to translate
- composes: flatten it into utilities, or extract a shared component instead of a shared class.
- Conditional class names: keep the logic in clsx or classnames.
- Dynamic styles[variant] lookups: replace them with a lookup object such as variantClasses.
- :global overrides: move them to globals.css inside an @layer components block, or use @apply.
- SCSS nesting, variables and mixins: flatten the nesting and map $variables to theme values in tailwind.config.ts.
Who the migration skill is for
Best for
- React codebases that already use CSS Modules and are standardising on Tailwind.
- Cursor users, since the repo's README says to copy skills into a .cursor/skills folder.
- Teams that want conversion done one component at a time with a visual check at the end.
Not for
- Plain CSS files that are not modules. The same repo has a sibling converting-css-to-tailwind skill for that.
- Setting up Tailwind from scratch. For a token-first setup, see tailwind-design-system.
- Building new components. shadcn and ui-styling cover component styling.
Use it with UiChemy
UiChemy builds WordPress pages, so this skill belongs on the React side of a project. If a Figma design has to become a WordPress site, UiChemy Figma to WordPress handles that, and Composer edits the result. Click Get Started on uichemy.com.
How to install Converting CSS Modules to Tailwind: Migration
git clone https://github.com/spencerpauly/awesome-cursor-skills.gitClone the repository
Run
git clone https://github.com/spencerpauly/awesome-cursor-skills.git. The skill sits in the resources/converting-css-modules-to-tailwind folder.Copy the skill folder
The README says to copy a skill into a .cursor/skills folder for a personal install, or into the project's own skills directory. Copy resources/converting-css-modules-to-tailwind there.
Start with one component
Pick a component with a .module.css or .module.scss file and ask your agent to convert it to Tailwind.
Review the clean-up
Check that the styles import is gone, the module file is deleted and no other file still imports it.
Check that it loaded
Ask the agent to convert one small module. It should list the classes first, convert them, then remove the import and the module file.
Key features
- Inventory firstThe agent lists the classes in a module before converting, so nothing is dropped and the scope of the change is clear.
- Class by class conversionEach CSS class is rewritten as Tailwind utilities, and the skill says to convert one component at a time.
- composes handlingA composes rule is flattened into utilities, or the shared styles are pulled out into a component rather than a class.
- Conditional class namesConditional logic stays in clsx, classnames or template literals instead of being rebuilt from scratch.
- Dynamic variant lookupsCode that indexes styles[variant] is replaced with a lookup object such as variantClasses.
- Global overrides:global rules move to globals.css, either inside an @layer components block or through @apply.
- SCSS supportSCSS nesting is flattened, variables map to theme values in tailwind.config.ts, and mixins become utility composition.
- Pseudo-element prefixesPseudo-elements use the before and after prefixes together with content, and the agent checks Tailwind variants for selectors like :nth-child.
- Clean-up checklistThe agent removes the styles import, deletes the module file, updates any barrel index.ts and searches for other imports.
- Visual verificationThe last step is to run the app and check the converted component visually, since a class mapping can compile and still look wrong.
Frequently asked questions
What is the converting-css-modules-to-tailwind skill?
It is a skill in the spencerpauly/awesome-cursor-skills repository. It guides an AI coding agent through migrating CSS Modules files, both .module.css and .module.scss, to Tailwind utility classes. It follows an inventory, convert, handle patterns and clean up sequence.
How do I install the CSS Modules to Tailwind skill?
Clone spencerpauly/awesome-cursor-skills and copy resources/converting-css-modules-to-tailwind into a .cursor/skills folder for a personal install, or into your project's skills directory as the README describes. Then ask your agent to convert a component.
How does it handle composes and :global?
A composes rule is flattened into utilities, or the shared styles become a component rather than a class. :global overrides move to globals.css inside an @layer components block, or use @apply. Both cases are spelled out in the skill's patterns step.
Does it convert SCSS files too?
Yes. The skill covers .module.scss as well as .module.css. SCSS nesting is flattened, $variables map to theme values in tailwind.config.ts, and mixins are rebuilt through utility composition instead of being copied across.
Should I convert a whole project at once?
The skill's rules say to convert one component at a time. It also says to run the app and check the result visually after each conversion, which keeps a styling regression from spreading across many files before you notice it.
Why does the skill avoid @apply classes?
Its rules say not to create @apply classes that replicate what the module did, because the goal is to eliminate the indirection. @apply still appears as an option for :global overrides, placed in the global stylesheet.
Does this skill work with agents other than Cursor?
The repository is a list of Cursor skills and its README documents the .cursor/skills folder. Another agent that loads SKILL.md folders may work, but the repo does not confirm it, so test one conversion first.
What license does the repository use?
GitHub lists the license as CC0-1.0, a public domain dedication. That covers the repository as listed, so you can copy the skill folder freely, though it is still sensible to check the repository's license file before bundling it into a product.