+
+
+
Tailwind CSS
+
+ {{ isCopied === 'all' ? '✅ Copied' : 'Copy' }}
+
+
+
diff --git a/src/utils/CSSRulesUtils.ts b/src/utils/CSSRulesUtils.ts
index 9daaf73..f1d8e4c 100644
--- a/src/utils/CSSRulesUtils.ts
+++ b/src/utils/CSSRulesUtils.ts
@@ -89,6 +89,16 @@ class CSSRulesUtils {
for (const rule of this.rules) {
const result = parseCSSStyleRule(element, rule);
+ if (
+ result.rules.some(
+ (r) =>
+ r.selector === '*' ||
+ r.selector === 'body' ||
+ r.selector === 'html',
+ )
+ ) {
+ continue;
+ }
if (result.mediaCondition) {
if (result.rules.length <= 0) continue;
@@ -139,6 +149,18 @@ class CSSRulesUtils {
) as SetRequired
;
});
+ const resolveCSSVariables = (element: Element, cssText: string): string => {
+ return cssText.replace(
+ /var\((--[^,)]+)(?:,\s*([^)]+))?\)/g,
+ (_, variable, fallback) => {
+ const computedStyle = getComputedStyle(element);
+ const value = computedStyle.getPropertyValue(variable).trim();
+ return value || fallback || '';
+ },
+ );
+ };
+ mainRules.cssText = resolveCSSVariables(element, mainRules.cssText);
+
return {
...mainRules,
animation: animationRules,
diff --git a/src/utils/TailwindCSS-parser.ts b/src/utils/TailwindCSS-parser.ts
new file mode 100644
index 0000000..83d08f4
--- /dev/null
+++ b/src/utils/TailwindCSS-parser.ts
@@ -0,0 +1,96 @@
+import { TailwindConverter } from 'css-to-tailwindcss';
+import { theme } from 'tailwindcss/defaultConfig';
+import { ElementAppliedStyleRules } from './CSSRulesUtils';
+
+export const converter = new TailwindConverter({
+ remInPx: 16,
+});
+
+export const parseBreakpoints = async (
+ appliedStyle: ElementAppliedStyleRules,
+) => {
+ let minBreakpointTailwind = '';
+ let maxBreakpointTailwind = '';
+ for (const m of appliedStyle.media) {
+ if (!m.mediaCondition) continue;
+ const minWidthMatch = m.mediaCondition.match(/min-width:\s*(\d+)px/);
+ const maxWidthMatch = m.mediaCondition.match(/max-width:\s*(\d+)px/);
+ if (minWidthMatch) {
+ const minWidth = parseInt(minWidthMatch[1]);
+ console.log(minWidthMatch);
+
+ // find the closest breakpoint
+ const closestBreakpoint = Object.entries(theme?.screens || {}).reduce(
+ (prev, [name, value]) => {
+ const size = parseInt(value.toString().replace('px', ''));
+ return Math.abs(size - minWidth) < Math.abs(prev[0] - minWidth)
+ ? [size, name]
+ : prev;
+ },
+ [Infinity, ''],
+ );
+
+ console.log(m);
+
+ const converted = await converter.convertCSS('.foo{' + m.cssText + '}');
+
+ if (converted.nodes.length > 0) {
+ minBreakpointTailwind +=
+ converted.nodes[0].tailwindClasses
+ .map((cls) => `${closestBreakpoint[1]}:${cls}`)
+ .join(' ') + ' ';
+ }
+ }
+ if (maxWidthMatch) {
+ const maxWidth = parseInt(maxWidthMatch[1]);
+ // find the closest breakpoint
+ const closestBreakpoint = Object.entries(theme?.screens || {}).reduce(
+ (prev, [name, value]) => {
+ const size = parseInt(value.toString().replace('px', ''));
+ return Math.abs(size - maxWidth) < Math.abs(prev[0] - maxWidth)
+ ? [size, name]
+ : prev;
+ },
+ [Infinity, ''],
+ );
+ const converted = await converter.convertCSS('.foo{' + m.cssText + '}');
+ if (converted.nodes.length > 0) {
+ maxBreakpointTailwind +=
+ converted.nodes[0].tailwindClasses
+ .map((cls) => `max-${closestBreakpoint[1]}:${cls}`)
+ .join(' ') + ' ';
+ }
+ }
+ }
+ return {
+ minBreakpointTailwind,
+ maxBreakpointTailwind,
+ };
+};
+
+export const parseClassToTailwind = async (
+ appliedStyle: ElementAppliedStyleRules,
+) => {
+ const converted = await converter.convertCSS(
+ '.foo{' + appliedStyle.cssText + '}',
+ );
+
+ const { minBreakpointTailwind, maxBreakpointTailwind } =
+ await parseBreakpoints(appliedStyle);
+
+ const baseScreen =
+ converted.nodes.length > 0 ? converted.nodes[0].tailwindClasses : [];
+ const responsiveClass = JSON.parse(JSON.stringify(baseScreen));
+
+ if (minBreakpointTailwind) {
+ responsiveClass.push(...minBreakpointTailwind.split(' '));
+ }
+ if (maxBreakpointTailwind) {
+ responsiveClass.push(...maxBreakpointTailwind.split(' '));
+ }
+
+ return {
+ base: baseScreen.join(' '),
+ responsive: responsiveClass.join(' '),
+ };
+};