arthie / xwind Goto Github PK

error - ./node_modules/@tailwindcssinjs/macro/lib/tailwindcssinjs.js:9:0
Module not found: Can't resolve '../../tailwindcss-data/lib/utilities'

After upgrading from v13 to v14 now getting this coming from macros

Hey!

This plugin (maybe others) have the wrong paths https://github.com/Arthie/xwind/blob/master/packages/xwind/plugins/objectstyles/removeFallbacks.js#L1

Workaround:

Importing directly from the lib folder

Reproducible demo: https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss-emotion

Hi when I tried Xwind with the latest version of NextJs I got the error

Cannot read property 'theme' of undefined

Firstly thanks for the project @Arthie , it is easy to setup and make developer experience better IMO.

I wanted to enable auto complete for tw classes without installing xwind VS Code Extension.
I followed the steps in typescript-xwind-plugin page but I couldn't make it work.

Checklist:

• Typescript configured in with-tailwindcss-emotion setup as explained nextjs official document
• VS Code uses the same TS version as the workspace which is 4.1.3
• Absolute filepath to tailwind config in tsconfig.json : C:/Users/tkaplan/Documents/projects/xwind-test/react-app/tailwind.config.js (also tried ./tailwind.config.js)
• Restarted VS Code.

Hey!

I just tried your library because it supports the latest versions of tailwind out of the box.
However, I've had some issue with colors being wrongly generated.

I have the following styled component:

const SelectableRowContainer = styled.div<SelectableRowProps>`
  ${props => (props.selected ? tw`border-yellow-500` : tw`border-gray-300`)};
  ${tw`border-solid border-2 w-full cursor-pointer flex`};
`

When compiling it with Babel, it generates the following:

var SelectableRowContainer = _styledComponents["default"].div.withConfig({
  displayName: "SelectableRow__SelectableRowContainer",
  componentId: "sc-1rdb9br-0"
})(["", ";", ";"], function (props) {
  return props.selected ? {
    "--border-opacity": "1",
    "borderColor": ["#ecc94b", "rgba(236, 201, 75, var(--border-opacity))"]
  } : {
    "--border-opacity": "1",
    "borderColor": ["#e2e8f0", "rgba(226, 232, 240, var(--border-opacity))"]
  };
}, {
  "borderStyle": "solid",
  "borderWidth": "2px",
  "width": "100%",
  "cursor": "pointer",
  "display": "flex"
});

The --border-opacity variable shouldn't be there. This generates the css: border-color: #e2e8f0", "rgba(226, 232, 240, var(--border-opacity)) which is invalid. I had the same issue with a background-color.

I'm using @tailwindcssinjs/macro 0.3.1 and tailwindcss 1.4.4

When running the latest version of xwind (0.7.4) and taildwindcss (2.0.2) I'm getting the error Class "group" not found for tags that are using group and child elements using group-hover.

<a href="#" css={xwbg-gray-100 text-gray-900 group flex items-center px-2 py-2 text-base font-medium rounded-md} > <svg css={xwtext-gray-500 mr-4 h-6 w-6} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" > <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /> </svg> Dashboard </a>

Hello

Im having an issue with conditional classes
i think about static evaluation and i can understand the logic behind the design
but i have to ask if there is a way to apply conditional classes with xwind ?

I tried to add group but it not work, is this an error?
https://tailwindcss.com/docs/pseudo-class-variants#group-hover

i am trying to add @tailwindcssinjs/macro to existing nextjs app with ant design and i got this error

./pages/index.js
MacroError: /home/darwis/dev/with-ant-design-app/pages/index.js: Error: @tailwindcssinjs/macro - [BABEL] unknown: Preset /* your preset */ requires a filename to be set when babel is called directly,

babel.transform(code, { filename: 'file.ts', presets: [/* your preset */] });

See https://babeljs.io/docs/en/options#filename for more information.

its working when using macro from tailwind.macro

Custom margin added to tailwind.config.js is not shown in vscode xwind plugins autocomplete list.
Custom class works in browser, I can see added class value but not in autocomplete list.

Thinks I tried:

• Restarting the dev server.
• Re-running the tw build script: tailwindcss build ./styles/tailwind.base.css -o ./styles/base.css
• Restarting VS Code.

tailwind.config.js configuration:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      margin: {
        75: "18.75rem",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [require("xwind/plugins/base")],
  xwind: {
    mode: "objectstyles",
  },
};

What version of Tailwind CSS are you using?

2.1.1

What build tool (or framework if it abstracts the build tool) are you using?

Next.js 10.1.3, @emotion 11.x, xwind 0.8.0

What version of Node.js are you using?

v14.5.3

What browser are you using?

Chrome

What operating system are you using?

macOs

Reproduction repository

https://github.com/Demetryi/TailwindJITBug

Describe your issue

When I start using mode: "jit" I get

matchUtilities is not a function

error, removing jit no error.
Looks like Xwind not updated and cannot use JIT mode in TailwindCSS

please remove package.lock before installation.

With the removeFallbacks plugin, font-weight is not generated anymore since the update to tailwindcss 2.0 and xwind.

With the removeFallbacks plugin, twfont-bold emits an empty fontWeight object

Hi I was migrating to tailwindcss v2 when I stumbled upon your library

I was using @tailwindcssinjs/macro previous

so while migrating I encountered the following error.

So after few days of figuring out the solution. I finally found out that the import order actually matters in this case

Here's a reproducible demo I forked from your nextjs sample
https://codesandbox.io/s/xwind-simple-example-forked-8zu41?file=/components/Button/Button.styles.ts

if you were to reverse the import order, it wont throw an error anymore.

Hello! Thanks for the great plugin, loving xwind so far (with nextjs). However, I'm getting some flicker (see https://easyblog-72jw8j77y.vercel.app), which is based off the nextjs starter. You can see the buttons flicker into position from lower to higher.
https://www.loom.com/share/754773e26397462f852001c9b9fbb91d (here's a video if it's not showing on your end).

I tried to inline critical css to see if that would help, but emotion doesn't seem to be pulling any styles, not sure if it's trying to pull them before they're processed by xwind?

I created a _document.js with the following to extract critical. Any ideas? Thanks!

import Document, { Html, Head, Main, NextScript } from 'next/document'
import { extractCritical } from '@emotion/server'

class MyDocument extends Document {

    static async getInitialProps(ctx) {
        const initialProps = await Document.getInitialProps(ctx)
        const page = await ctx.renderPage()
        const styles = extractCritical(page.html)
        return { ...initialProps, ...page, ...styles }
    }

    render() {
        return (
            <Html lang="en">
                <Head>
                    <style
                        data-emotion-css={this.props.ids.join(' ')}
                        dangerouslySetInnerHTML={{ __html: this.props.css }}
                    />`
               </Head>
                       <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}

export default MyDocument

I have been made aware of tailwind brand guidelines.
In order to avoid confusion, I will be renaming this project.
Apologies for the inconvenience!

is xwind required in production?

I wonder if is possible to support the tw= syntax from twin.macro to gain full VSCode support for that library.

import "twin.macro";
const Input = () => <input tw="border hover:border-black" />; // No IntelliSense
const Input = () => <input css={tw`border hover:border-black`} />; // This has IntelliSense ✅

Everything else works perfectly, great job!

How do I choose between xwind and twin.macro? Thank you! 😄

Hey folks,

I'm interested in building a tailwind cheatsheet which should be able to programmatically generate a list of tailwind classes given a config. I think tailwindcss-data might be able to help me with this, but I don't quite get how it all fits together. It seems that, based on the usage inside macro and the typescript, it's not a simple procedure and requires lots of deeper postcss knowledge.

Would you be willing help me out with a concise example on how to go from tailwindData(config, corePlugins) to a list of generated classnames?

Thanks in advance!

Can you upgrade your package to make it working with the last version of Tailwind.

https://tailwindcss.com/docs/upgrade-guide

Hi, I just found this package and trying.
I have a button like this css={styles.button} and worked perfect
But is there any to use like this? css={styles.button + tw bg-red-200}
Just want change other background for button. Create 2 props button with just small different look like silly :D
Thank you

current document example err "Codesandbox with Typescript, Nextjs and Emotion"

event - build page: /
Warning: viewport meta tags should not be used in _document.js's <Head>. https://err.sh/next.js/no-document-viewport-meta
Could not find files for / in .next/build-manifest.json
Could not find files for / in .next/build-manifest.json
Warning: viewport meta tags should not be used in _document.js's <Head>. https://err.sh/next.js/no-document-viewport-meta
Could not find files for / in .next/build-manifest.json
Could not find files for / in .next/build-manifest.json
error - ./node_modules/fs.realpath/index.js:8:0
Module not found: Can't resolve 'fs'
null

and
https://github.com/vercel/next.js/blob/canary/examples/with-tailwindcss-emotion/README.md

example run same error

Hello,

I've been trying to use this lib in a project of mine.
You may already be aware, but it doesn't seem to be usable with Firefox :

Unhandled Runtime Error

SyntaxError: invalid regexp group

Call Stack
twClassesComposer
node_modules/@tailwindcssinjs/class-composer/lib/classComposer.js (16:0)
twClassesVariantsParser
node_modules/@tailwindcssinjs/class-composer/lib/classComposer.js (58:0)
tailwindcssinjs
node_modules/@tailwindcssinjs/macro/lib/tailwindcssinjs.js (19:0)
<unknown>
webpack-internal:///./components/gui/Button.tsx (23:92)

It seems to be related to the following regex :

  const VARIANT_ARRAY_SYNTAX_REGEX = new RegExp(
    `(?<variant>\\S+(?:\\${separator}\\w+)?)\\[(?<classes>(?:.|\\n)*?)\\]`,
    "g"
  );

Indeed, simply trying to instantiate this regex in Firefox cause invalid regexp group.
My guess is that it is because Firefox doesn't support negative look-behind.
Someone listed here information about negative look-behind support : https://stackoverflow.com/questions/641407/javascript-negative-lookbehind-equivalent

Do you think the regex could be written differently to avoid negative look-behind ?

I adjusted the tailwindcss theme, but my changes are not showing on the xw types and it logs errors

// tailwind.config.js
module.exports = {
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        green: "#00AF54",
        "yellow-dark": "#FBAF00",
        "yellow-light": "#FFD639",
        pink: "#FFA3AF",
        blue: "#007CBE",
      },
    },
  },
  variants: {},
  plugins: [],
  // xwind options
  xwind: {
    mode: "objectstyles",
  },
};

 <div
      css={xw`h-screen bg-gray-800 flex justify-center items-center bg-yellow-dark`}
    >

the error says "bg-yellow-dark is not a tailwind class, but its still works on the browser

I got the template from nextjs template for emotion and tailwindcss

Please help out🥺🥺

I am using the nextjs template, Tailwind CSS with Emotion.js example.
Does it mean I should use objectstyles mode?

Hi there,

When I try to use experimental dark mode, I get an error:

Error: Utility with variant class 'dark' not found"
    at @tailwindcssinjs/tailwindcss-data/lib/transformers/getGenerateTwClassSubstituteRoot.js:52:27

Here's the snippet:

tw`dark[from-blue-400 via-pink-500 to-red-400 bg-gradient-to-tr]`

Here's the config file:

module.exports = {
  experimental: {
    darkModeVariant: true
  },
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true
  },
  purge: {
    content: ['./src/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}']
  },
  important: true,
  dark: 'class',
  plugins: [
    require('@tailwindcss/typography')({
      modifiers: []
    }),
    require('@tailwindcss/ui')
  ]
}

Interestingly, the vscode plugin renders a tooltip correctly:

Any thoughts? :)