windicss / docs Goto Github PK
View Code? Open in Web Editor NEW๐ Documentation for Windi CSS
Home Page: https://windicss.org
License: MIT License
๐ Documentation for Windi CSS
Home Page: https://windicss.org
License: MIT License
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.
Lines 17 to 25 in 892c3ce
should be WindiCSS()
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.
( reposted issue at windicss/windicss )
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.
The new colors from v34 are not in the docs: https://windicss.org/posts/v34.html
Also, seems gray-900
is not 18181b
as the current docs say as it was replaced by zinc-900
how to show codes lineNumbers?
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
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
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>
Long dropdown menus, like the one for Utilities, overflow the viewport on some screens and are inaccessible via scroll:
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.
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.
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?
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.
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.
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! ๐๐ผ
Type | Platform | Version |
---|---|---|
System | macOS | Monterey 12.2.1 (M1 Pro) |
Browser | Chrome | 99.0.4844.51 (arm64) |
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 ๐
Svelte REPL is offline: https://voorjaar.github.io/svelte-windicss-preprocess/
is there any translate plan?
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
border bottom not added WindiCSS utilities examples
Line 225 in f6f211f
<ul class="children:mb-4">
<li></li>
<li></li>
</ul>
(Bad example, but you get it ๐)
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 :)
If there is such a plan, I can join in it.
is there tutorial how to integrate with angular project ??
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.
Hi,
Nice project.
Just wondering what's the licence of windicss, and how the sync with tailwindcss is supposed to evolve.
Thxs.
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.
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.
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
Please provide a real fix, instead of comment it out.
Originally posted by @hannoeru in #173 (comment)
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?
maybe add short part about which way you are sorting classes, as it seems to be different than headwind
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!
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.
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;
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
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.
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.
https://windicss.org/utilities/typography.html#line-height
Line height preview not showing when clicking on numeric values.
After refreshing sometimes disappears
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.