mokshit06 / typewind

The safety of Typescript with the magic of Tailwind.

The safety of Typescript with the magic of Tailwind.

---

Introduction

Typewind brings the safety, productivity and intellisense of Typescript over to Tailwind

import { tw } from 'typewind';

const styles = tw.border.hover(tw.border_black);

How it works

Typewind's compiler is a babel plugin that runs over your code, statically analyses it and converts all the tw styles into their corresponding Tailwind classes.

This results Typewind compiles away, leaving 0 runtime code.

import { tw } from 'typewind';

const styles = tw.border.hover(tw.border_black);

// ↓ ↓ ↓ ↓ ↓ ↓

const styles = 'border hover:border-black';

Features

Zero bundle size - Typewind compiles away all the styles used, and converts them to static classes at build

Apply variants to multiple styles at once - Since Typewind uses TS, it allows for more intuitive syntax for applying variants

import { tw } from 'typewind';

const mediaStyles = tw.sm(tw.w_4.mt_3).lg(tw.w_8.mt_6);
const groupInGroups = tw.text_sm.sm(tw.bg_black.hover(tw.bg_white.w_10));

Type safety and intellisense - Using the TS compiler, Typewind is able to provide type safety to tailwind, and provide intellisense & autocomplete for all the classes from tailwind config.

import { tw } from 'typewind';

const styles = tw.border_blackk; // ❌ Property 'border_blackk' does not exist on type 'Typewind'. Did you mean 'border_black'?

The above code would also return in a build error on running tsc

Types generated from config - Type definitions of tw are generated directly from your tailwind config, so it is always custom to you, and also creates types for custom theme palette and plugins.

typewind's Issues

Does Typewind support arbitrary variants?

Arbitrary variants were added in Tailwind 3.1. Does Typewind support this yet?

Feedback for “NextJS Example”

NextJS example not working. Please check.

@tailwindcss/@container-queries support

Hi there! It looks like the @tailwindcss/container-queries https://github.com/tailwindlabs/tailwindcss-container-queries plugin may not be supported due to a compilation error with the types. I tried using the Vite example https://typewind.vercel.app/docs/examples/vite

SyntaxError: CssSyntaxError: Unknown word (1:43)
> 1 | .\@container {container-type: inline-size;container-name}

Generating types breaks with Tailwind CSS v`3.3`

Hi,

thank you for this fantastic tool ❤️

In the version 3.3 of Tailwind CSS, they added a support for ESM and TypeScript config.

I've changed my config to ESM, and rename it to tailwind.config.ts.
I am trying to generate the types with the following command:

pnpm typewind generate

then I get the following error:

$ pnpm typewind generate
/home/xeho91/<redacted>/tailwind.config.ts:1
import pluginAspectRatio from "@tailwindcss/aspect-ratio";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at createTypewindContext (/home/xeho91/<redacted>/node_modules/typewind/dist/cli.js:72:56)
    at generateTypes (/home/xeho91/<redacted>/node_modules/typewind/dist/cli.js:155:15)

---

Additional information

My project has type set to module in package.json file.

// package.json
{
  ...
  "type": "module",
  ...
}

Feature Request: Support Data Attributes

Tailwind v3 supports data attributes, e.g.

<div data-size="large" class="data-[size=large]:p-8">
  <!-- ... -->
</div>

These are useful for libraries like Radix UI that uses data attributes for state-based styling.

Perhaps a syntax like tw.data("size=large", tw.p_8) would work.

Support for SWC

NextJS now uses SWC, but when using a Babel configuration, it disables SWC to use only Babel :

info - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
info - Using external babel configuration from D:\...\...\Project\.babelrc

I'm not sure if this issue is directly related to SWC or if it belongs here?

SWC plugin support

This is an issue as a start for RFC to develop a swc plugin instead of babel plugin

Is this package supposed to be "private'?

In the package.json I see the following line:

typewind/package.json

Line 4 in 81de675

"private": true,

Is it intentionally "private"? I'm not sure if that changes anything on the npm side. I know that originally this was a private repo, but it's public now and the docs talk about installation.

populate the engines field in the package.json

I'm following along with the vite example to convert an existing vite repo. When I installed typewind with node 14, the following occurred when I tried to run yarn dev:

bug: Unexpected token '??=' (While processing: .../node_modules/typewind/dist/babel.js)

I was able to fix this by bumping my node from 14 to 18 using n. Can you spend some time testing which node major versions work with typewind and specify the supported versions using the engine field in the package.json?

https://docs.npmjs.com/cli/v9/configuring-npm/package-json#engines

Is it possible to support Tailwind's shorthand colour opacity syntax?

I'm not sure if I just haven't figured out how this works or if this syntax is simply not yet supported, so I apologize if I missed something. But is it possible to support this syntax?

https://tailwindcss.com/blog/tailwindcss-2-2#shorthand-color-opacity-syntax

Thanks!

Can you expand on how to get this to work with vite-backed projects?

You mention, "Some frameworks like Vite have a different way of editting your babel plugin, so make sure to take a look at their docs first." Any idea how this can be accomplished?

Arbitrary values don't work

Link to the code that reproduces this issue

https://stackblitz.com/edit/mokshit06-typewind-ckoigp?file=pages/index.tsx

To reproduce

Apply any arbitrary values (e.g tw.text_['20px']). It doesn't matter the order, any use of it is breaking the app with the error shown below.

Describe the Bug

Any attempt to use an arbitrary value is going to throw an error like the following:

error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[11].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[11].use[2]!./styles/globals.css
TypeError: /home/projects/mokshit06-typewind-ckoigp/typewind.tsx: Cannot read properties of undefined (reading 'toString')
Import trace for requested module:
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[11].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[11].use[2]!./styles/globals.css
./styles/globals.css

Expected Behavior

Should work as any other tw utility

Error on NextJS 13.4.4, Filesystem cache is not enabled

Hello, one error I encountered
is this after executing pnpm dev

error ./node_modules/next/dist/client/dev/amp-dev.js
Error: Filesystem cache is not enabled, cannot read plugin from phsyical path
- wait compiling...
- error ./node_modules/next/dist/client/dev/amp-dev.js
Error: Filesystem cache is not enabled, cannot read plugin from phsyical path

to reproduce :

create next project
npx create-next-app@latest
choose app dir, and yes to everything.

my config

/** @type {import('next').NextConfig} */
const path = require('path');

const nextConfig = {
  reactStrictMode: true,
  webpack: (config, { isServer }) => {
    // This will replace the default entry point for the '@' symbol with the 'src' directory
    config.resolve.alias['@'] = isServer
      ? path.join(__dirname, './src')
      : path.join(process.cwd(), './src');
    return config;
  },
  experimental: {
    swcPlugins: [['typewind/swc', {}]],
  },
};

module.exports = nextConfig;

is there any way to enable this filesystem cache somehow we don't know about

thanks before

Are custom theme properties supported

I have a theme which has custom style properties. Does Typewind support custom tailwind theme properties?

typewind generate fails in a Yarn PnP workspace

$ npx typewind generate
Need to install the following packages:
  [email protected]
Ok to proceed? (y) y
node:internal/modules/cjs/loader:1093
  throw err;
  ^

Error: Cannot find module 'tailwindcss/resolveConfig.js'
Require stack:
- /Users/davidmaskasky/.npm/_npx/2afda5fafe38bc83/node_modules/typewind/dist/cli.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1090:15)
    at Module._load (node:internal/modules/cjs/loader:934:27)
    at Module.require (node:internal/modules/cjs/loader:1157:19)
    at require (node:internal/modules/helpers:119:18)
    at Object.<anonymous> (/Users/davidmaskasky/.npm/_npx/2afda5fafe38bc83/node_modules/typewind/dist/cli.js:39:36)
    at Module._compile (node:internal/modules/cjs/loader:1275:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
    at Module.load (node:internal/modules/cjs/loader:1133:32)
    at Module._load (node:internal/modules/cjs/loader:972:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/davidmaskasky/.npm/_npx/2afda5fafe38bc83/node_modules/typewind/dist/cli.js'
  ]
}

Node.js v19.9.0

churn-mitigation typewind $ yarn typewind generate 
/Users/davidmaskasky/Code/monorepo/.pnp.cjs:49909
      Error.captureStackTrace(firstError);
            ^

Error: typewind tried to access tailwindcss, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Required package: tailwindcss (via "tailwindcss/resolveConfig.js")
Required by: typewind@npm:0.1.5 (via /Users/davidmaskasky/Code/monorepo/.yarn/cache/typewind-npm-0.1.5-ff13fbf7bd-d7bc2ef073.zip/node_modules/typewind/dist/)

Require stack:
- /Users/davidmaskasky/Code/monorepo/.yarn/cache/typewind-npm-0.1.5-ff13fbf7bd-d7bc2ef073.zip/node_modules/typewind/dist/cli.js
    at require$$0.Module._resolveFilename (/Users/davidmaskasky/Code/monorepo/.pnp.cjs:49909:13)
    at require$$0.Module._load (/Users/davidmaskasky/Code/monorepo/.pnp.cjs:49759:42)
    at Module.require (node:internal/modules/cjs/loader:1157:19)
    at require (node:internal/modules/helpers:119:18)
    at Object.<anonymous> (/Users/davidmaskasky/Code/monorepo/.yarn/cache/typewind-npm-0.1.5-ff13fbf7bd-d7bc2ef073.zip/node_modules/typewind/dist/cli.js:39:36)
    at Module._compile (node:internal/modules/cjs/loader:1275:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
    at require$$0.Module._extensions..js (/Users/davidmaskasky/Code/monorepo/.pnp.cjs:49953:33)
    at Module.load (node:internal/modules/cjs/loader:1133:32)
    at require$$0.Module._load (/Users/davidmaskasky/Code/monorepo/.pnp.cjs:49772:22)

Node.js v19.9.0```

add support for ts config files

typewind generate fails when the tailwind config is a typescript file instead of a cjs file. Is there any way we can get support for writing the tailwind file as a cjs file, or does tailwind require specific behavior from cjs/require import syntax module loading?

Same issue with postcss.config.cjs.

Support custom config file path.

I'd love to already use typewind in production with my monorepo. But I need to be able to pass a custom path, because my config file is on a different package of my application.

Btw, great work dude! 🎉

Using the background utility at the beginning throws a type error

Link to the code that reproduces this issue

https://stackblitz.com/edit/mokshit06-typewind-d7tzbz?file=pages/index.tsx

To reproduce

Apply any background property at the beginning (if we put it later it works), e.g: className={tw.bg_black_500}

Describe the Bug

If we apply a bg_color_number (only at the beginning) it throws a type error:

Type '(style: Property) => Property' is not assignable to type 'string'

It's like is recognizing bg_color_number as a variant.

Expected Behavior

Should work as any other utility

Multiple Tailwind configs in one project

Would this package unlock the ability to have multiple tailwind configs in one project?

For example, we have our site's brand, but in some areas we require custom branding from our clients (including different spacing, fonts, colors, etc.). We didn't want to pollute our branding/design system with our clients, so we just use arbitrary values for everything within that scope, which can be annoying and inconsistent

As far as I know, the reason you can't have multiple tailwind configs right now is because editors don't understand context. But, would using an explicit import like typewind solve that problem?

Anyway, just a thought...

Thanks

Improve DX by showing the PX equivalent for the REM values

Describe the feature you'd like to request

Show the equivalent of the rem value in PX on the typings. This is useful because usually the layout token values are given in PX instead of rem.
How it is currently:

Describe the solution you'd like

Something like the tailwind intellisense already does would be great (see the // 16px)

add support for daisyui and other tailwind-based component libraries

bit of a pie in the sky idea, but it would be nice if typewind could parse classes from other tailwind plugins - currently adding daisyui to my plugins breaks typewind's type codegen, resulting in the tw import being typed as unknown

Support for important modifier

Describe the feature you'd like to request

Ability to apply the important modifier, e.g: <div class="!font-bold">
https://tailwindcss.com/docs/configuration#important-modifier

Describe the solution you'd like

Just brute forcing some syntax alternatives there so it can quick start a discussion
tw.font_bold_!
tw.font_bold['!']
tw.font_bold_important

Svelte(Kit) Support?

First of all, kudos on what looks to be a great library 🎉

Noticed the Vite docs that show how to add the Babel plugin for React, any chance this currently supports Svelte / SvelteKit?

Failed to invoke SWC plugin in a Vite project

In my Vite project I have this following setup:

import react from "@vitejs/plugin-react-swc"


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react({ plugins: [["typewind/swc", {}]] })],
})

But when I run the project I got:

[vite] Internal server error: failed to handle: failed to invoke plugin: failed to invoke plugin on 'Some("project path/ClientApp/src/components/auth/auth-provider.tsx")'

Caused by:
    0: failed to invoke `project path\ClientApp\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\typewind\dist\typewind_swc.wasm` as js transform plugin at project path\ClientApp\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\typewind\dist\typewind_swc.wasm
    1: RuntimeError: unreachable
           at rust_panic (<module>[310]:0x383c8)
           at std::panicking::rust_panic_with_hook::hc5c73bd02fe928d4 (<module>[225]:0x2b611)
           at std::panicking::begin_panic_handler::{{closure}}::hcd8b0196239bb506 (<module>[316]:0x38b25)
           at std::sys_common::backtrace::__rust_end_short_backtrace::h634ecf1fa70ae144 (<module>[315]:0x38a5e)
           at rust_begin_unwind (<module>[149]:0x2146c)
           at core::panicking::panic_fmt::h1024bc10a158814e (<module>[82]:0xfb7f)
           at core::result::unwrap_failed::h4f10a8b6d25baa65 (<module>[31]:0x4ff7)
           at rkyv::impls::core::<impl rkyv::DeserializeUnsized<[U],D> for [T]>::deserialize_unsized::h23eb454e66ed7cc7 (<module>[586]:0x84604)
           at swc_ecma_ast::decl::_::<impl rkyv::Deserialize<swc_ecma_ast::decl::Decl,__D> for <swc_ecma_ast::decl::Decl as rkyv::Archive>::Archived>::deserialize::hce2fff52aaeab3dd (<module>[618]:0x8ec3e)
           at rkyv::impls::core::<impl rkyv::DeserializeUnsized<[U],D> for [T]>::deserialize_unsized::h5244dff0d14890db (<module>[105]:0x18175)
           at __transform_plugin_process_impl (<module>[104]:0x14f34)
           at __transform_plugin_process_impl.command_export (<module>[883]:0xced76)

BUG: Typewind Generate command doesn't work

Hey all,

I have just installed typewind for the first time and I have everything setup but I get an error running pnpx typewind generate. This is the error I get:

.../Library/pnpm/store/v3/tmp/dlx-33723  | Progress: resolved 187, reused 158, downloaded 1, added 159, done
node:internal/modules/cjs/loader:988
  throw err;
  ^

Error: Cannot find module 'tailwindcss/resolveConfig.js'
Require stack:
- /Users/X/Library/pnpm/store/v3/tmp/dlx-33723/node_modules/.pnpm/[email protected]/node_modules/typewind/dist/cli.js

I was curious and had a look at the file this calls: node_modules/typewind/src/utils.ts It shows an issue with the createContext import:

Could anyone help me resolve this please?

Arbitrary values with noUncheckedIndexedAccess

When noUncheckedIndexedAccess is enabled, arbitrary values like tw.after(tw.content_["'Hi'"]) throw the following error: Argument of type 'Property | undefined' is not assignable to parameter of type 'Property'..

This is expected, and should be fixable by non-null assertion operator: tw.after(tw.content_["'Hi'"]!).

However, in this case, I get a compilation error (from postcss-loader):

    let result$$ = tw.after(tw.content_["'Hi'"]!);
                                              ^

  SyntaxError: missing ) after argument list

Am I missing something?

swc support?

Feature request: concat or conditional class names

Use case 1 : reusable long class names, e.g. a custom button style

If typewind has a util method to concat two (or multiple) pre-defined classnames, that will be great.

// extract common part
const MY_BTN_CLS = tw.bg_white.rounded_full.text_black.font_bold.uppercase.border.border_black;

// it works
<button className={MY_BTN_CLS}>My Button</button>

// it does not work and all styling is broken
<button className={MY_BTN_CLS.bg_cyan_500}>My Cyan Button</button>

// it works
<button className={MY_BTN_CLS.concat(" " + tw.bg_cyan_500)}>My Cyan Button</button>

// it does not work, only the last two classes are broken (due to the lack of space between them)
<button className={MY_BTN_CLS.concat(tw.bg_cyan_500)}>My Cyan Button</button>

Use case 2 : conditional styling
Some variants share common base styling, and only have a few different classes, like highlight current tab
This can be done via different approaches, e.g. concat current, or extract a component to handle the style and behavior.
Also it would be of great help if typewind such a method like

tw.if(
    1 > 0 /* expression */, 
    tw.text_green /* yes */,  
    tw.text_red /* (optional) no */
)

const baseStyles = tw.bg_white.rounded_full.text_black.font_bold.uppercase.border.border_black;
const currentStyles  = tw.bg_cyan_500.text_white;

// something like this, or `concatIf`
<button className={tw.if(isCurrent currentStyle, baseStyles)}>text</button>

Just my random ideas, any thoughts or comments are welcomed, :)

Expo integration

Discussed in #27

^{Originally posted by SamueleBarbiera February 7, 2023}
Can it be used lime nativewind or even implementend in the t3-turbo stack?

Cannot find module 'typewind/transform' or its corresponding type declarations.

I installed Typewind in a quite new and non-modified T3 app (which uses Next.js) and set it up according to the documentation. When trying to add the transform in tailwind.config.cjs, the import has the following error:

Cannot find module 'typewind/transform' or its corresponding type declarations.

My tsconfig.json file looks pretty much the same as in the Typewind Next.js example.

Typewind version: 0.1.3
Typescript version: 4.9.5
Tailwind version: 3.2.0

How can I repeat this entry using typewind

How can I repeat this entry using typewind
it's custom color with opacity

tailwind class sorting prettier plugin

Would be nice to have. See: https://tailwindcss.com/blog/automatic-class-sorting-with-prettier

Codemod: Tailwind -> Typewind

Create a codemod that converts tailwind classes to typewind.

I still need to figure out the patterns we want to observe and how to make sure it's a class from tailwind. Would love to hear your thoughts here @Mokshit06 @kavinvalli

tailwind-animate plugin is not supported

I'm running into the following erro when trying to run typewind generate
I'm guessing it is not able to parse the CSS variable based on the output

SyntaxError: CssSyntaxError: Unknown word (1:11)
> 1 | .fade-in {--tw-enter-opacity}

This is solved by removing tailwind-animate from my plugin list.
Here's a codesandbox with a minimal reproduction.

Babel dependency

Are there any plans to remove the dependency on babel in the future?

As typewind depends on babel, I need to create a .babelrc in nextjs project.
For this reason, from nextjs v12 and later versions, the build time increases by using webpack instead of swc when building.

Type Error in Intellij

The css is working, only Intellij shows type error as below:

TS2339: Property 'text_cyan_400' does not exist on type 'TypewindError"Typewind's types haven't been generated. Run npx typewind generate or follow the docs at https://typewind.dev/docs/installation">'.

Additional info:

• A clean setup with Vite, Babel, React, Next UI (v2)
• Done npx typewind generate
• Tip can show up
• npm run build can pass, no error.

Any ideas how to fix the ts error in Intellij? thanks in advance

Arbitrary groups feature request

Hi @Mokshit06, what you think about support arbitrary group and another css/tw features in typewind?
I mean:
peer-[:nth-of-type(3)&]:block
after:content-['*']
peer-checked/published:text-sky-500
[&:where(th,td)]:p-2

and so on

Nextjs 13.4 SWC plugin not working with typewind

Discussed in #49

^{Originally posted by pawanrana1992 July 7, 2023}
I am trying to use Typewind in nextjs 13.4.x with SWC support, but it is not working as per the suggested configuration for swc from Typewind side. I am getting error like this. can anyone please suggest what is the right configuration for Nextjs 13.4. I love this plugin and any how I need to use it. please help.

Note: also if i am using typewind inside rollup lib, and after build and use inside nextjs project with babel.

1. library build has reference to use custom config name like my_colors_primary_main. and not throw any error with rollup build. and storybook also works fine with custom colors.
2. typewind inside the library used as external dep
3. Nextjs setup with tailwind and typewind using babel to work. (tw.my_colors_primary_main works in the nextjs)
4. Added the tailwind theme config as per lib requirement
5. Generated the typewind config using npx typewind generate
6. Importing a component from library to nextjs project
7. the library throw error that my_colors_primary_main not found.

Please help how can i resolve this issue as well.

Thanks in advance team.

Typewind generates unescaped * className causing ts language server parsing errors

Figured out why I was having this issue: #24 - while some DaisyUI classes were properly typed, others weren't, and the ones that were and weren't were arbitrary.

Turns out in the generated file, it produced the following Property

As a result, all classes generated on lines after this one (such as hero-content) are broken. If this Property is escaped as follows:

The exported tw object typechecks with all members correctly. If you could look into pushing a hotfix to a.) escape this class as shown b.) remove the class c.) investigate whether this class is getting generated correctly (maybe it's supposed to be something else?) that would be great! I'm looking to use this library in production more but missing most of the classes from the tw object/having to monkey patch the export is far from ideal.

Switch to turbo repo

Would be down to contribute.

Add Tradeoffs

Add a TRADEOFFS.md that clearly describes the shortcomings of typewind and cases where it might be better to just use plain tailwind

Arbitrary Values Not Supported in Plugins When Using SWC

I have a custom Tailwind plugin defined as follows:

const sizePlugin = plugin(({ matchUtilities, theme }) => {
  matchUtilities(
    {
      s: (value) => {
        let [width, height] = Array.isArray(value) ? value : [value, value];
        return { width, height };
      },
    },
    {
      values: {
        auto: 'auto',
        ...theme('spacing'),
        '1/2': '50%',
        '1/3': '33.333333%',
        '2/3': '66.666667%',
        '1/4': '25%',
        '2/4': '50%',
        '3/4': '75%',
        '1/5': '20%',
        '2/5': '40%',
        '3/5': '60%',
        '4/5': '80%',
        '1/6': '16.666667%',
        '2/6': '33.333333%',
        '3/6': '50%',
        '4/6': '66.666667%',
        '5/6': '83.333333%',
        full: '100%',
        screen: ['100vw', '100vh'],
        min: 'min-content',
        max: 'max-content',
        fit: 'fit-content',
      },
    },
  );
});

It works fine when used like so: tw.s_4. However it fails to emit classes when used like so: tw.s_['10px'] or with a built-in variant tw.s_['1/2'].

The classes don't show up at all when using the bracket notation with this plugin.

A more simple version of the plugin that also doesn't work follows:

const sizePlugin = plugin(function ({ matchUtilities, theme }) {
  matchUtilities(
    {
      s: (value) => ({
        width: value,
        height: value,
      }),
    },
    {
      values: theme('spacing'),
    },
  );
});

I'm using the latest version of Typewind, 0.1.1 with NextJS 13.2.3 and the SWC plugin.

How to use groups ?

tw.group() is a function which requires styles, while in the twailwind doc we can use it as a simple class.

Typecheck failing – generated TS definition file appears to be invalid?

Hi there,

Thanks for this package, I was just playing around with it and it looks really great.

I've been having an issue however when running a type check on my project. I was able to get everything working, but when I run a typecheck like so: tsc --noEmit, I get the following error:

If I look at the file in questions, it doesn't seem to be valid TS:

I initially thought it might be an issue with my project, but I was able to replicate this error using the the Next.js example provided here: https://typewind.vercel.app/docs/examples/next

I downloaded the repo, and then tried running the typecheck as described above, and got the same error.

Any ideas what the problem might be? As far as I'm aware, the syntax the package is generating is not valid TS, irrespective of version, so not sure what the problem is. Thank you in advance.

Vite + Typewind doesn't generate Tailwind styles

Hi! I'm trying to use Vite React with Tailwind and Typewind but having trouble with styles of it

It seems that Typewind transforms classNames but Tailwind doesn't generate styles for it

Here is repository where this bug is being replicated https://github.com/skaneprime/nx-react-vite-tailwind-typewind-issue

Active discussions

Why not enable discussions?