windicss

tailwind

Hi, I'm trying to add a background image by updating windi.config or tailwind.config like the following:-

module.exports = {
  darkMode: 'class',
  theme: {
    extend: {
      backgroundImage: (theme) => {
        console.log(theme)
        return {
          ...theme,
          'home-pattern': "url('./src/assets/home.svg')"
        }
      }
    }
  },
  variants: {
    extend: {}
  },
  plugins: []
}

but it's not working even the console.log didn't get to run, I tried the normal and slow tailwind + postcss+autoprefixer and it's working just fine

with v2.2.2 some colors to not get sent back to windicss-intellisense, <v2.21 works perfectly fine. It is related to windicss here, as the flatColors are coming from it

e.g. bg-amber & bg-fuchsia

Extend the idea from twin-micro

<div class="hidden!" />

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

<div css="{{ display: none !important }}" />

Add !important to multiple classes with bracket groups:

<div class="(hidden ml-auto)!" />

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

<div css={{ "display": "none !important", "marginLeft": "auto !important" }} />

Description 📖

When using the raw option to define media queries in screens, the CSS generated by windicss for these rules is incorrect.

Any class that uses a modifier defined using raw, such as

screens: {
  print: { raw: 'print' },
},

will render that object since the code is expecting a string:

@media (min-width: [object Object]) {
  .print\:hidden {
    display: none;
  }
}

Would you accept a PR implementing this behavior?

Notes 📝

I'm using it from vite, which uses the interpret mode.

In case you haven't heard about it, Vite is a dev server and a bundler built on top of ESM with the idea of on-demand transpiling. It's blazing fast.

I am a heavy user of Tailwind with Vite, but Tailwind has a huge overhead in terms of HMR. Found this project today, and it looks quite promising and fits perfectly with Vite's notion. So I gave it a try and made a Vite plugin for windicss (just an MVP atm):

https://github.com/antfu/vite-plugin-windicss

Posting here for someone looking for a similar thing. Also would love to hear what you think about it. Feel free to close.

Thanks for the awesome work on this project and really looking forward to seeing where it will go.

PS. more context about this on Vite's discord server:
https://discord.com/channels/804011606160703521/804082351624945695/810136889969475594

When running the install command from the docs, it crashes and generates this random folder in my root directory

which contains the following content:

{
  "browsers": {
    "local": [
      {
        "command": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
        "version": "9.11.18362.0",
        "windows": true,
        "name": "ie",
        "type": "ie",
        "profile": false
      }
    ]
  }
}

I'm trying to install windicss in to my nuxt 2.15 project. The following error gets thrown:

PS P:\project> npx ni vue-windicss-preprocess -D
Node Inspector v0.6.2
   info  - socket.io started
node: [DEP0062]: `node --debug` and `node --debug-brk` are invalid. Please use `node --inspect` and `node --inspect-brk` instead.
C:\Users\jackv\AppData\Roaming\npm-cache\_npx\23836\node_modules\ni\bin\ni.js:115
        _dbg.on('exit', function(code) {
             ^

TypeError: Cannot read property 'on' of undefined
    at C:\Users\jackv\AppData\Roaming\npm-cache\_npx\23836\node_modules\ni\bin\ni.js:115:14       
    at runRunner (C:\Users\jackv\AppData\Roaming\npm-cache\_npx\23836\node_modules\ni\node_modules\browser-launcher\index.js:64:14)
    at C:\Users\jackv\AppData\Roaming\npm-cache\_npx\23836\node_modules\ni\node_modules\browser-launcher\index.js:74:22
    at C:\Users\jackv\AppData\Roaming\npm-cache\_npx\23836\node_modules\ni\node_modules\browser-launcher\index.js:47:22
    at FSReqCallback.oncomplete (fs.js:164:23)

Hello, are planned the implementations of Tailwind directives? Like:

.btn {
  @apply p-2;
  @apply bg-green-500;
  @apply duration-200;
  @apply text-lg;
}

.btn:hover {
  @apply bg-green-400;
}

/* Or... */

@screen lg {
  .btn {
    @apply text-xl;
  }
}

This project is amazing!

Hello ! Thanks for this awesome compiler/interpreter :) !
I'm trying to have a minimal dev environment, and your tool does a wonderful job trimming a bunch of dependencies, but I also like using Tailwind's VSCode extension, which seems to rely on the main npm package

Here's the error

Failed to initialise: Error: Cannot find module 'tailwindcss/package.json'
Require stack:
- c:\Users\leo\Projets\cervo-svelte\noop.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:972:15)
    at a (c:\Users\leo\.vscode-oss\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:38328)
    at s (c:\Users\leo\.vscode-oss\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:38437)
    at e.exports (c:\Users\leo\.vscode-oss\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:38459)
    at resolve (c:\Users\leo\.vscode-oss\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:156730)
    at c:\Users\leo\.vscode-oss\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:161602
    at c:\Users\leo\.vscode-oss\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:156672
    at L (c:\Users\leo\.vscode-oss\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:156738)
    at L (c:\Users\leo\.vscode-oss\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:156957)
    at c:\Users\leo\.vscode-oss\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:161544 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ 'c:\\Users\\leo\\Projets\\cervo-svelte\\noop.js' ]
}
(node:3132) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'classNames' of undefined
    at Te (c:\Users\leo\.vscode-oss\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:116588)
    at Ge (c:\Users\leo\.vscode-oss\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:124048)
    at c:\Users\leo\.vscode-oss\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:124397
    at Array.forEach (<anonymous>)
    at c:\Users\leo\.vscode-oss\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:124368
    at Array.forEach (<anonymous>)
    at c:\Users\leo\.vscode-oss\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:124333
(node:3132) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:3132) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I'm also opening an issue on the VSCode extension issue tracker, since I guess it might need cooperation between the two projects to make things work : tailwindlabs/tailwindcss-intellisense#264

Hi,

with tailwind i could do something like this:

module.exports = {
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        darkTheme: {
          600: '#262A34',
          700: '#181A20',
          800: '#1A1B20',
        },
      },
    },
  },
};

with windi nothing happens when im adding something like bg-darkTheme-600 to a div

is this not supported in windi ?

I'm using windicss with vuetify, sometimes I need to override default css of vuetify, so I think it will bed good if we have important plugin

Hi !

Awesome work 👏

I found an issue though if you have this:

<body class="font-mono">
    ...
        <div>
            is mono
        </div>
        <button>
            is not mono
        </button>
    ...
</body>

Not sure what's wrong

Hi,

I did configure a new color with only one value. Let's call is discord.
discord: { DEFAULT: "#7289da", 100: "#7289da", },
I can't use bg-discord, I can only use bg-discord-100. It looks like the DEFAULT key is not used? Maybe I got an issue in my project setup? I use vite2 with your vite plugin.

Many thanks for you awesome work!
Tom

Forms plugin styles are being overridden. Is the forms CSS being imported too early?

I'm not sure if this is a bug in WindiCSS or the Vite plugin.
Vite plugin issue here.
windicss/vite-plugin-windicss#21

Test repo here
https://github.com/JohnCampionJr/vitesse/tree/bug/windicss-forms

Hey 👋

thanks for the nice plugin which really helps with the build time 👍

One issue I came across is that custom animations defined in tailwind.config.js don't seem to get picked up. Am I doing something wrong here?

Example repo: https://github.com/simerlec/vite-react-ts-starter

thanks 🙏

Hello there. I've met with this brilliance yesterday and encountered a weird issue.

When I comment out my style section like this, the code still works and styles get applied:

<!-- <style lang="postcss">
  nav {
    border: 10px solid black;
    @apply bg-red-200;
  }
</style> -->

But if I comment out my code like this, styles doesn't get applied as intended:

<style>
  /* nav {
    border: 10px solid black;
    @apply bg-red-200;
  } */
</style>

It doesn't matter if I change the lang attribute of the style tag, or even omitting it. The issue is bound to Windi CSS since removing preprocess codes from rollup.config.js, everything works as expected.

I'm willing to help to fix this issue if any tests and/or recoding to do. Thanks a lot for this plugin.

Hi,
just found, that if you are using a prefix, aspect-ratio-w* isnt generated with the right prefix, while aspect-ratio-h has the prefix

to repoduce:

const Processor = require('windicss')
const aspectRatio = require('windicss/plugin/aspect-ratio')
const processor = new Processor({prefix: 'wi-', plugins: [aspectRatio]})
const result = processor.interpret('wi-aspect-w-16 wi-aspect-h-16')

> result
{
  success: [ 'wi-aspect-w-16', 'wi-aspect-h-16' ],
  ignored: [],
  styleSheet: StyleSheet { children: [ [Style], [Style], [Style] ] }
}
> result.styleSheet
StyleSheet {
  children: [
    Style {
      selector: '.aspect-w-16',
      important: false,
      property: [Array]
    },
    Style {
      selector: '.aspect-w-16',
      important: false,
      property: [Array],
      _wrapSelectors: [Array]
    },
    Style {
      selector: '.wi-aspect-h-16',
      important: false,
      property: [Array]
    }
  ]
}

duplicate classes can not remove easily with current interfaces while using vue or svelte plugin.

Windicss is generating a padding attribute rather than padding-right and padding-left, when using the container class. This is inconsistent with Tailwindcss behaviour.

As discussed in #72 (comment) Windi CSS currently doesn't support color functions. Color functions makes possible to define alpha variables when your color value is not convertable to RGBA channels (e.g. css variables).

Context:
https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo
https://github.com/tailwindlabs/tailwindcss/search?q=opacityValue
https://github.com/tailwindlabs/tailwindcss/blob/e3ed12782f85f2985b3ba4d3e62451b720a93230/src/util/withAlphaVariable.js

I feel there is a huge potential for this project in the near future and it will be compared with Tailwind quite frequently. I think it's nice to have a good naming conversion and some logo and branding stuff now.

Naming Conversion

I saw you are mention this project mostly as windicss while the official name for tailwind is Tailwind CSS. Would love to know what' the naming conversion you'd prefer:

• windicss
• Windi CSS
• WindiCSS
• WindiCss

I personally would pick Windi CSS as it matches with tailwind's and in many context we can have Windi vs Tailwind or Tailwind CSS and Windi CSS. The current lowercase one feels less like a tool's name - windicss vs Tailwind CSS.

Brand Color

Clearly, Tailwind uses teal(#06b6d4) as its brand color. Guess we should also pick up a color for Windi so it can be better comparable.

Do you have any color in mind?

Logo

Wondering what's the meaning/inspiration for the name windi? If you'd like to, I am happy to draft some logo designs for it.

Would love to hear what you think about this, thanks!

Hi

thanks for this great project!

I stumbled upon some issue on my project. I basically did the setup according to the docs.

https://github.com/regenrek/nuxt-storyblok-starter/blob/windicss/nuxt.config.js#L123
https://github.com/regenrek/nuxt-storyblok-starter/blob/windicss/package.json#L55
https://github.com/regenrek/nuxt-storyblok-starter/blob/windicss/tailwind.config.js

I installed the vue-windicss-precocess manually due npx raised an error according to #42

After starting the dev server I'm stuck at this error

 ERROR  in ./.nuxt/components/nuxt-error.vue                              friendly-errors 22:11:36

Module build failed (from ./node_modules/vue-windicss-preprocess/index.js):
TypeError: handler is not a function
    at Processor.loadPlugin (/Users/jondoe/projects/nuxt-storyblok-starter/node_modules/windicss/lib/index.js:15719:9)
    at /Users/jondoe/projects/nuxt-storyblok-starter/node_modules/windicss/lib/index.js:15477:166
    at Array.map (<anonymous>)
    at Processor.resolveConfig (/Users/jondoe/projects/nuxt-storyblok-starter/node_modules/windicss/lib/index.js:15477:77)
    at new Processor (/Users/jondoe/projects/nuxt-storyblok-starter/node_modules/windicss/lib/index.js:15386:29)
    at Object.index (/Users/jondoe/projects/nuxt-storyblok-starter/node_modules/vue-windicss-preprocess/index.js:308:21)
                                                                          friendly-errors 22:11:36
 @ ./.nuxt/index.js 19:0-52 518:0-32
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

Thank you in advance
Regards !

I can't create a custom color with a DEFAULT option like this:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      color: {
        brand: {
           DEFAULT: '#feba34',
           light: '#febf34',
           dark: '#feab34',
        }
      }
    }
  }
}```

Example of use that I hope:

```html
// index.html
<a class="bg-brand hover:bg-brand-light active:bg-brand-dark" href="#">Link</a>
}```

But bg-brand doesn't works, only if it is used like bg-brand-DEFAULT :frowning_face:

See discussion here #65

Looking for an option to limit Windi CSS to only using original Tailwind CSS features and code. If desired by the user, this will keep code consistent between Tailwind and Windi.

any possibility of adding this plugin to your lib?

https://github.com/bentzibentz/tailwindcss-animate.css

Here's my tailwind.config.js file:

const { gridTemplateColumns } = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    gridTemplateColumns: {
      ...gridTemplateColumns,
      list: 'repeat(auto-fit, minmax(16em, 1fr))',
    },
  },
}

Here's what was generated with Tailwind:

.grid-cols-list {
  grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
}

Here's what is generated with Windi:

.grid-cols-list {
  grid-template-columns: repeat(repeat(auto-fit, minmax(16em, 1fr)), minmax(0, 1fr));
}

Tailwind docs: https://tailwindcss.com/docs/grid-template-columns
Windi code: https://github.com/windicss/windicss/blob/5fcae337dc27dc411c244bb8f0037283615edb21/src/lib/utilities/dynamic.ts#171

It seems this code only handles default config (from 1 to 12) but doesn't allow entirely custom values. Is it on purpose? Did I miss something?

Thanks!

Does Windi Css is compatible with Nuxt ?

Hi there!

Awesome work, thanks 😃

I've found an issue recently by switching a Tailwind CSS project to Windi CSS:

.base {
  @apply w-9 h-9 rounded-md;
}

.extend-base {
  @apply base bg-white;
}

.extend-base class doesn't have the .base class styles applied to it

Am I missing something?

FYI I'm using vite-plugin-windicss

Thank you!

@apply border-alt-500;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;

output

border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
--tw-border-opacity: 1;
border-color: rgba(158, 134, 172, var(--tw-border-opacity));

windicss auto escaped :global(bg-white sm:text-gray-700) -> \:global(bg-white sm\:text-gray-700)

:global() is the svelte syntax, should not be escaped.

Hi, I'm switched my Tailwind CSS project to windicss. But unfortunately my custom theming plugin didn't work as expected.

Reproduction

Repo: https://github.com/sibbng/sibbng.com

git clone https://github.com/sibbng/sibbng.com.git
cd sibbng.com
yarn
yarn dev

How my custom theming plugin work?

First of all, themes defined in https://github.com/sibbng/sibbng.com/blob/main/theme.yml
My theming plugin is placed on https://github.com/sibbng/sibbng.com/blob/main/themewind.js

This plugin reads yaml file and adds something like these as utility classes:

[data-theme="dark"], [data-theme="light"] {
  --active: #0099FF;
}

[data-theme="dark"] {
  --primary: #111111;
  --on-primary: #B4B4B4;
  --on-primary-active: #F2F2F2;
  --frame: #1E1E1E;
  --on-frame: #808080;
}
[data-theme="light"] {
  --primary: #FFFFFF;
  --on-primary: #888888;
  --on-primary-active: #333333;
  --frame: #EFEFEF;
  --on-frame: #808080;
} 

Also extending default theme with these semantic colors:

{
  active: 'var(--active)',
  primary: 'var(--primary)',
  'on-primary': 'var(--on-primary)',
  'on-primary-active': 'var(--on-primary-active)',
  frame: 'var(--frame)',
  'on-frame': 'var(--on-frame)',
  'on-frame-active': 'var(--on-frame-active)'
}

In my template I'm using them like class="bg-primary text-on-primary". You can see production deployment of tailwind version at https://sibbng.netlify.app/

That plugin was working in Tailwind. But didn't work in windicss.

When the cli script is put in the package.json as a script it will not be able to match any of the files

If it is run directly in the console, it will work just fine.

config:

module.exports = {
  theme: {
    fontSize: {
      main: '1.25rem',
    }
  }
}

the resulting class ist:

.text-main {
  font-size: 1;
}

its working if changing it to array:
main: ['1.25rem'],

also the lineHeight is not attached if you specify it as second array item:
main: ['1.25rem', '2rem']

.text-main {
    font-size: 1.25rem;
}

while using an object works:
main: ['1.25rem', {lineHeight: '2rem'}]

I would like to use LCH Colors (https://css.land/lch/)

Anyone has any idea how to define theme and then use them??

I can't manage to animate elements.
Im using svelte with svelte-windicss-preprocess and your vs extension.

Example:
<div class="bg-green-300 w-16 h-16 animate-pulse">Pulsing...</div>

Result:
Nothing happens. Even with other animations like animate-spin.

BTW I love the new vs code extension, windicss + svelte will be my go to stack for building web apps.

In compilation mode, empty class may still generate a new hash name.

'my-custom-red' : '#ff0000' // bg-my-color-name doesn't work

my: {
 customred: '#ff0000; // .bg-customred works
}

my: {
 custom: {
  red: '#ff0000'; // does not work
 } 
}

I've set up my colors following the docs at https://tailwindcss.com/docs/customizing-colors#extending-the-defaults, so right now my only option is to rename all colors to the second example. It'd be nice if whatever works in tailwind works with windicss .

Update: Also, DEFAULT no-modifier key doesn't seem to work
https://tailwindcss.com/docs/customizing-colors#color-object-syntax

In resolveConfig if theme property is function, extendTheme will overwrite it. then you will lost default config in that part.

I have the following animation in my tailwind.config.js, that works fine with tailwindcss, but doesn't work with windi (just shows a static circle):

module.exports = {
  theme: {
    extend: {
      animation: {
        skbounce: 'skbounce 2.0s infinite ease-in-out',
      },
      keyframes: {
        skbounce: {
          '0%, 100%': { transform: 'scale(0.0)' },
          '50%': { transform: 'scale(1.0)' },
        },
      },
    },
  },
}

I have the most current version of Nuxt with vue-windicss-preprocess added as stated in the documentation.
Any idea what I can do to make it work?

When using the CLI (version 2.1.11, I'm on Windows 10) I can't figure out how to pass all files of a subfolder as the first argument.

The example from the docs reads as follows:

windicss "./**/*.html" (...)

This looks like a glob to me. So I'd expect that the following would select all .html files in the public folder and any of its subfolders:

windicss "./public/**/*.html" (...)

But it doesn't. I can use ./**/*.html to select ./public/index.html, but it also looks through node_modules which could potentially include a lot of classes I don't need. windicss --help also hasn't more information about what [filenames] is or what format is expected.

Problem

Because Tailwind CSS use Post CSS for their CSS Processor, you can use postcss-import plugin to import external CSS file into your project. To prevent using Post CSS in Windi CSS project, how i can import external CSS into my project?

Example

Example @import syntax from postcss-import plugin:

@import 'swiper/dist/swiper.min.css';

Solution

I think we can create another Windi CSS plugin to handle @import syntax, or we can add @import syntax to a core of directives feature.

Let me know how your opinion about this problem and what the solution can i do.

I saw in the projects-tab that you're working on an extension for VSCode. And I just wanted to ask if you can implement in that extension the feature to auto-collapse attributes like tw and sm and so forth.

Currently I'm not using taildwind as the author recommends. I hate having long class attributes in my html, because it makes it very unwieldy and hard to read. So I just write normal class names and then in my <style> I use the @apply directive. Which apparently the author does not recommend, although I don't fully understand why.

If you'd be able to implement that feature into your extension then I'd be happy to use attributes like class, or better yet tw for all of that.

And in case it's not clear what I mean by auto-collapse, I mean that as long as you're not actively writing in the class or tw attribute, that it will collapse and look like this in the editor: tw="...". And that you can click on the ... to expand the attribute again and write in it.

hi @antfu please see some bugs

1. missing aspect-ratio pseudo class

not found pseudo class

2. priority ordering custom properties translate

Hey!
Are there any plans to make a React / Next.js version?

Thanks for the great package 👻.
When I add import "windi.css" in the index.ts file on the .vitepress config folder --> Had an error bellow, hope your team can fix it!

Link index.ts on my repo.

[vite] Internal server error: Failed to resolve import "windi.css". Does the file exist?

As written in the code. This cannot overwrite the default configuration

import { defineConfig } from 'vite-plugin-windicss';
export default defineConfig({
  theme: {
    screen: {
      sm: '576px',
      md: '768px',
      lg: '992px',
      xl: '1200px',
      '2xl': '1600px',
    },
  },
});