Comments (10)
Do I need to do something else?
Yes, see the warning at https://vite-plugin-ssr.com/windi-css.
Please read the docs before asking for help. See https://brillout.github.io/rules/.
from vike.
At first glance, I wouldn't know why it doesn't work.
@import 'tailwindcss/base';
does work as expected, correct?- You did include
WindiCSS()
in your plugin list invite.config.js
, yes?
from vike.
Haven't tried any direct Tailwind stuff yet 🤔 How should I go about it?
Yes, WindiCSS()
is in my vite.config.js
, followed all setup steps which worked correctly as expected in plain vite-react-ts 🤷♂️
from vike.
Let me have a look
from vike.
Working example: https://github.com/brillout/vite-plugin-ssr-vite-plugin-windicss
from vike.
My fault I should have read the docs better 😅
It defaults to only working with files in /src
had to include /pages
to options as described here https://windicss.org/guide/vite.html#scanning
(already provided a PR to fix the typo in the example windcss/helpers
, misses the second i)
from vike.
👍 Let me know if you have any ohter question
from vike.
Working example: https://github.com/brillout/vite-plugin-ssr-vite-plugin-windicss
Just out of curiosity, I couldn't find any mention of actual Tailwind classNames, have you confirmed they're working?
As according to my trials and the Windi docs on scanning it shouldn't work ^^
from vike.
I was wondering the same ^^; I just saw the Tailwind CSS included so I was assumings that things work. (I never used Tailwind CSS.)
had to include /pages to options
If this necessary then we should def add a little guide to vite-plugin-ssr's README. A PR would be warmly welcome :-).
from vike.
@brillout your demo didn't use any tailwind util classes. It doesn't error for me, but it doesn't apply any windicss styles either.
If I import 'virtual:windi.css'
in PageLayout.jsx, it should work, but it doesn't:
Do I need to do something else?
from vike.
Related Issues (20)
- Logger assumes string HOT 2
- Code based routing
- Config inheritance bug HOT 2
- Improve Algolia search
- Bug
- Bugs with alias 'vue': 'vue/dist/vue.esm-bundler.js' HOT 1
- basic src/pages/ structure is weirdly converted to domain driven structure HOT 3
- I got error, but no more info for bugs. HOT 4
- vite-plugin-ssr Bug HOT 1
- Netlify Deployment 404
- Infinite reruns in watch mode using tsx for Vike HOT 1
- New setting to avoid the `passToClient` error HOT 6
- react-helmet-asnyc issues with vike-react
- baseAssets affecting app base in vite dev mode HOT 1
- "Stumbled upon a Vike bug" with vanilla-extract and `prerender: true` HOT 5
- New Vike setting `base` and only apply it to production by default
- Unable to get Nested `Layout` working HOT 2
- Cannot declare nested `meta` when using `extends` HOT 3
- New setting `headersResponse` HOT 1
- Improve error message `must be defined over a so-called "pointer import"`
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vike.