shiyangzhaoa / css-modules-to-tailwind Goto Github PK
View Code? Open in Web Editor NEWTailwind css convert tool
License: MIT License
Tailwind css convert tool
License: MIT License
Removing 'unused' classes is a nice feature, but may introduce some bugs.
Let's look at this:
const Com = () => (
<div className={style.tab}>
<img src={src} alt={alt} />
<div>
);
.tab {
position: sticky;
top: 0;
}
.tab img {
width: 0.625rem;
}
The tab is a class that can be fully converted to tailwind CSS, so I removed it, it became like this:
const Com = () => (
<div className='sticky top-0'>
<img src={src} alt={alt} />
<div>
);
.tab img {
@apply w-2.5;
}
There will be problems with the style of img
.
If className
is multiple, won't remove it in jsx.
const Com = () => (
<div className=`${style.tab} sticky top-0`>
<img src={src} alt={alt} />
<div>
);
.tab img {
@apply w-2.5;
}
Hi, I have another request in order for this library to work a bit better for Gatsby related projects ๐.
Gatsby will throw errors if you import a style that does not exist in the css module file at build time.
Cannot read properties of undefined (reading 'e')
error Generating JavaScript bundles failed
For example, the jsx is left like so after the conversion: ${styles.navItemLink} text-blue-300 no-underline
But .navItemLink
is removed from the css module file because all styles have been transformed to tailwindcss classes.
Gatsby will attempt to import .navItemLink
from the file and throw an error because it is no longer present.
Remove the styles.className
from the className={}
if the class no longer exists in the module.
Hi, thanks for this library, it's really great!
I have a use case I would like this library to support. I am willing to implement it but may need some guidance. I figured I would open this issue before a PR either way.
Support import * as styles
syntax
The way to import css modules in Gatsby uses the import * as
syntax. This doesn't work out of the box with css-modules-to-tailwind
.
Thanks in advance.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.