windicss / docs Goto Github PK

I havent used TailwindCSS before except from trying it using the CDN so I can't tell how to install plugins for WindiCSS which in the docs it naturally assumes previous tailwind knowledge.

I followed the configuration from this page and made this one:

module.exports = {
	darkMode: 'class',
	extract: {
		include: [
			'public/index.html',
			'public/static/views/*.html',
			'public/static/js/**/*.{js}',
		],
	},
	theme: {},
	variants: {},
	plugins: [
		require('windicss/plugin/forms'),
		require('windicss/plugin/typography'),
	],
};

I looked for instructions on which npm packages to install so just installed linked ones:

npm install @tailwindcss/typography
npm install @tailwindcss/forms

yet I still get this when trying to compile using the official CLI tool:

Error: Cannot find module 'windicss/plugin/forms'
...

i changed windicss/plugin/ to @tailwindcss/ naturally since it's the name of the packages despite being doubtful because the configuration from the docs specified otherwise, and it worked!

Is the package names automatically converted by Vite or other tools or there's actually a windicss/plugin/forms that i can't find or install?

The current documentation for using windicss with SvelteKit at https://windicss.org/guide/svelte.html#sveltekit is outdated, since it doesn't take SvelteKit's recent switch to vite into account. Although it's currently still in open beta and therefore likely a moving target, I think it would be nice to update the docs at least to the current situation.

After some fiddling, I found this to be a working solution for the latest SvelteKit/svelte@next:

// svelte.config.cjs
const node = require('@sveltejs/adapter-node');
const pkg = require('./package.json');

/** @type {import('@sveltejs/kit').Config} */
module.exports = {
  kit: {
    adapter: node(),

    target: '#svelte',

    vite: {
      ssr: {
        noExternal: Object.keys(pkg.dependencies || {})
      },
      plugins: [
        require('vite-plugin-windicss').default()
      ]
    }
  }
};

// src/routes/$layout.svelte
<script>
  import 'virtual:windi.css'
</script>

<slot></slot>

As the owner mentioned here.

This package will be archived, we will give up support for it, please switch your project to windicss-webpack-plugin.

So the guide might to update to catch up the decision.

I couldn't find the use of @apply in the docs. I assume it's the same as in tailwind but nonetheless shouldn't it have a dedicated page?

The new colors from v34 are not in the docs: https://windicss.org/posts/v34.html

• slate
• zinc
• neutral
• stone

Also, seems gray-900 is not 18181b as the current docs say as it was replaced by zinc-900

is there any translate plan?

It seems the search function of the docs is indexing some stuff incorrectly.

What I've found is that when searching for any of these things:

A lot of results show up but non of them go to the correct page:

My guess is that it's incorrectly showing these page because it sees the text in that sidebar.

Current docs:

Repo main docs:

You have neglected to write about how you can use directional borders in windicss border page doesn't mention this stuff at all I had to go to the tailwind border directions to find the info

Hi,

I think I found a specificity issue which causes utility classes in a template to be ignored when they are also set in an extracted component class e.g. a btn-secondary class in a main.css.

To reproduce see here vite + windicss repository.

See this Line 2 from the repro repo:
https://github.com/ctholho/windicss-template-no-overwrite/blob/fce3f102138ab01986585550a058e5a24b980797/src/components/HelloWorld.vue#L2

Expected behaviour:

bg-yellow-500 in my template should overwrite both the background color that I set
· in a btn (bg-green-500) class in src/main.css
· in a btn (bg-red-500) class in a <style> of the SFC in vite.

Work around to fix / Remediation:

This tailwind.config.js config fixes the issue for me. I don't know if there are any unintended for this though.

in your tailwind.config add this

   important: '#app',

as is explained in the tailwind docs #selector-strategy.

configuration#no-need-to-clear-defaults says that any configuration option will extend options, but that seems to not be the case in windicss. I still need to use the extend option, else the options will get overridden.

(Issue created from discord discussion, message link in #svelte)

This WindiCSS Play URL should show Does it preserve?

But the default content of Playground is shown instead. This could be useful for WindiCSS bug report.

Thanks!

Hey guys I noticed there was a problem with the responsiveness of some components of the homepage.

The inline code editor close to the footer, doesn't give the full responsive feel as the code on the left is tightly squeezed together for anyone to make a change.

If responsiveness can't be achieved, could you guys put like a change orientation option there 😀

border bottom not added WindiCSS utilities examples

Hi,
Nice project.
Just wondering what's the licence of windicss, and how the sync with tailwindcss is supposed to evolve.
Thxs.

If there is such a plan, I can join in it.

how to show codes lineNumbers?

Found it in /posts/v31

p.s.

I can't seem to find @windicss/vitepress-theme repo to fix this 😅

is there tutorial how to integrate with angular project ??

Congrats on the new docs site, it looks great!

Just noticed this bug in the typography demo where the demo text is dark in dark mode.
https://windicss.org/utilities/typography.html

vs

Svelte REPL is offline: https://voorjaar.github.io/svelte-windicss-preprocess/

I read here and I confuse the alias which is required or not? Hope you guy can modify it 😁!

Please provide a real fix, instead of comment it out.

Originally posted by @hannoeru in #173 (comment)

Just a little typo of the animte-spin word on the "New Features In v3.1" page.

<ul class="children:mb-4">
  <li></li>
  <li></li>
</ul>

(Bad example, but you get it 😉)

Hey everybody, quick little issue here. While setting up a SvelteKit project today I needed to refer to the docs (honestly I still cannot remember if it's svelte-preprocess-windicss or svelte-windicss-preprocess. I have to look it up like 75% of the times I use it).

Unfortunately, I ran into an ugly 404 page where I expected that beautiful Svelte page to be. I closed out the browser window, reopened it, and now the page is appearing. When I refresh the page, however, it's showing the title as 404, just for a split second, before fully loading.

Furthermore, this isn't the first time I've encountered this bug. If memory serves me correctly, about 2-3 weeks ago I was encountering it on the Vite integration page, and I was using Safari at the time. Today I'm using Chrome. I'm only reporting it now since this is the second time it's occurred (and in the same manner as before). Sorry!

I've attached a screenshot and a 7 second recording to show what I mean, as well as some system stats.

Thanks! 👋🏼

You can copy the below sample into the WindiCSS REPL at https://windicss.org/play.html

<div>
  <p class="text-1rem text-black mb-2 md:text-2rem md:text-red-600">
    NOT Responsive Variant Groups
  </p>
  <p class="text-1rem text-black mb-2 md:(text-2rem text-red-600)">
    Responsive Variant Groups
  </p>
</div>

Both lines should match font size and color as you pass the medium breakpoint but only the one NOT using Variant Groups does.

The outline page does not have the old utilities that are supposed to be used in tailwind. but instead has your version. With your version, I can't control the outline offset. We still need the outline because you cannot get transparent offsets without it. Ring utilities can't create transparent offsets please get rid of the utilities that you presented in favor of the old ones.

Hi there is specific section on the right hand of the website named "Sections" that when you click on specific link it should jump to that specific section related to that link, But It is not working?
Utilities Page

There are some broken links in https://windicss.org/guide/vite.html#installation-%F0%9F%92%BF

• In Configuration the link to options.ts is broken.

• Link to ./example.html also doesn't seem to work.

• Link to Vitesse@feat/windicss also doesn't seem to work.

I'd submit a PR, but I'm not sure what the correct links are.

Thanks for making windicss and have a good day :)

This page is broken
https://windicss.org/guide/svelte.html

Seems that it gets redirected from https://windicss.org/guide/svelte https://windicss.org/guide/svelte.html.

Page is indexed in google, So I find it by searching in google, not routing in the docs.

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
app.171a0f05.js:1 TypeError: Cannot destructure property 'frontmatter' of 'o.data' as it is null.
    at app.171a0f05.js:16
    at kt.r [as effect] (app.171a0f05.js:1)
    at kt.get value [as value] (app.171a0f05.js:1)
    at app.171a0f05.js:16
    at kt.r [as effect] (app.171a0f05.js:1)
    at kt.get value [as value] (app.171a0f05.js:1)
    at yt (app.171a0f05.js:1)
    at Proxy.<anonymous> (app.171a0f05.js:16)
    at mr (app.171a0f05.js:1)
    at app.171a0f05.js:1
(anonymous) @ app.171a0f05.js:1
app.171a0f05.js:1 Hydration completed but contains mismatches.

I opened the repo in gitpod and tried to build the docs.
The following are the commands I tried.

npm i pnpm
pnpm install
pnpm build 

Versions of the packages

node: v16.13.2
pnpm: 6.32.1

But, the build step failing always saying

.vitepress/theme/components/global/playground/InlinePlayground.vue:265:33 - error TS2322: Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Did you mean 'className'?

265         <div v-if="showPreview" class="border-l border-$windi-bc w-10em p-3 min-h-40">
                                    ~~~~~


Found 208 errors in 55 files.

I don't understand what I did wrong. Because the same steps are followed in github action files (ci.yml). This seems so simple, yet making my head scratch.

Please point me in the right direction to understand the issue.

https://windicss.org/utilities/typography.html#line-height
Line height preview not showing when clicking on numeric values.
After refreshing sometimes disappears

Am just new to Windi CSS, looking like great work so far! Again, I've only just come across Windi, so pardon any ignorance :)

Is there an option to not Auto-Infer Variables and Variants beyond the tailwind.config settings? (Or select the features that can auto-infer, such as only margin and padding)

The limits set by the tailwind config, for me, is a strength as it helps to enforce the consistency of a style guide. And the times when having to step outside the rules needs to be a conscious decision.

https://github.com/windicss/docs/blob/main/plugins/official/typography.md

Is there a commonly used configuration where export default and require work together?

export default {
  theme: {
    // ...
  },
  plugins: [
    require('windicss/plugin/typography'),
    // ...
  ],
}

If this is indeed incorrect & should be changed to import them at the top, I can search for this and make a PR to change it in other places as well as here.

According to the docs:

add svelte-windicss-preprocess config to svelte.config.js

+ import { windi } from "svelte-windicss-preprocess";
  /** @type {import('@sveltejs/kit').Config} */
  const config = {
+   preprocess: [
+     windi({})
+   ],
    kit: {
      // hydrate the <div id="svelte"> element in src/app.html
      target: '#svelte'
    }
  };

export default config;

but the default sveltekit now comes like this:

import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		// hydrate the <div id="svelte"> element in src/app.html
		target: '#svelte'
	}
};

export default config;

Several tutorials on the web tells that we should use vite-plugin-windicss like this:

https://www.liip.ch/en/blog/sveltekit-and-tailwind-windi-css

and

https://dev.to/dansvel/sveltekit-windi-2g50

npm i -D vite-plugin-windicss

// svelte.config.js
import preprocess from 'svelte-preprocess';
import WindiCSS from 'vite-plugin-windicss/dist/index.mjs'

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte',
        vite: {
            plugins: [
                WindiCSS(),
            ]
        }       
    },  
};

export default config;

Long dropdown menus, like the one for Utilities, overflow the viewport on some screens and are inaccessible via scroll:

The actual rgb() values of the colors doesn't match with the hex posted on the documentation.

Example:
Yellow 900
hex: #713f12
actual rgb: rgb(120, 53, 15)
expected rgb: rgb(113, 63, 18)

This includes their color levels.

( reposted issue at windicss/windicss )

Seems like the Algolia search API is returning an error and is preventing search:
Operations quota exceeded. Change plan to get more Operations.

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

Matches approximate colors based on user input, "rgb() or hex", in the website windicss colors

For instance, if i want to get a color rgb(50, 50, 50) or #333, the result will be dark-200.

should be WindiCSS()

https://windicss.org/plugins/interfaces.html

The plugin documentation is pretty barebones, I'd really like to see some explanation of the difference between each different interface and what each of the functions in the examples actually does.

maybe add short part about which way you are sorting classes, as it seems to be different than headwind