The apply() method in the twind configuration

[xzdwq]

Hi!

Stack:
"@twind/core": "^1.1.3",
"vue": "^3.2.41",
"vite": "^3.2.1",
"typescript": "^4.6.4",

I am using "@twind/core": "^1.1.3", and in setting up my config I have a question how should I apply the apply() method.

If earlier ("twind": "^0.16.17",) I could use it like this:

import { apply, setup } from 'twind/shim';

setup({
  darkMode: 'class',
  theme: {
    extend: {},
  },
  preflight: () => ({
    html: apply('h-full w-full'),
  }),
});

then now when using:

import { apply, defineConfig, install } from '@twind/core';

import presetAutoprefix from '@twind/preset-autoprefix';
import presetTailwind from '@twind/preset-tailwind/base';

install(
  defineConfig({
    presets: [
      presetAutoprefix(),
      presetTailwind(),
    ],
    darkMode: 'class',
    theme: {
      extend: {},
    },
    preflight: ({ theme }: { theme: (arg0: string) => string }) => ({
      html: apply('h-full w-full'),
    }),
  }),
);

i'm not getting the desired result.
I can certainly use it like this:

html: {
  width: '100%',
  height: '100%',
},

but I would like to get the desired effect from apply for more complex tasks.
Tell me what I'm doing wrong?

[sastan]

Hi,

this changes a little. You need to use the css helper. The reason is that I want twind to follow tailwindcss more closely to make migrating easier. Sorry that it broke your code and made your migration more difficult.

import { defineConfig, css, apply } from "@twind/core"
import presetAutoprefix from "@twind/preset-autoprefix"
import presetTailwind from "@twind/preset-tailwind"

export default defineConfig({
  presets: [
    presetAutoprefix(),
    presetTailwind(/* options */),
  ],

  preflight: css`
    html {
      @apply h-full w-full;
    }
  `,

  // preflight: css({
  //   html: {
  //     '@apply': 'h-full w-full'
  //   }
  // }),
})

You can use the theme(), @layer, and @screen helpers as well.

Links:

• Example on twind.run: https://twind.run/version-bandit-junior?file=config
• Twind docs (not much yet, working on it): https://twind.style/reference#css-strings-and-objects
• Tailwind docs for @apply: https://tailwindcss.com/docs/functions-and-directives#apply
• Tailwind docs for theme: https://tailwindcss.com/docs/functions-and-directives#theme
• Tailwind docs for screen : https://tailwindcss.com/docs/functions-and-directives#screen

[xzdwq]

Thank you for the quick and detailed answer! This solves my problem. I really admire what you are doing!