Can't get it to work with Vite as dev server
Opened this issue · 8 comments
Hey!
I stumbled upon this plugin after trying to get https://github.com/benface/tailwindcss-children to work with Tailwind v3.
The issue
I'm using Vite as my build tool and the moment I try to add tailwind-children as a plugin my project just keeps on loading and times out after a bit.
My tailwind.config.js contains the following:
const forms = require('@tailwindcss/forms');
const defaultTheme = require('tailwindcss/defaultTheme');
const children = require('tailwind-children');
module.exports = {
content: [
'./src/**/*.{vue,js}',
'./index.html',
],
theme: {
...
},
plugins: [
forms,
children,
],
};
When I remove the plugin and restart my Vite dev server everything works as expected again.
Package versions
The installed versions of the plugin, Vite and Tailwind are as follows within the package.json:
"tailwind-children": "^0.2.2",
"autoprefixer": "^10.4.2",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.18",
"vite": "^2.7.2",
Possible solution
Might be a wild guess, but maybe Vite can't process .mjs or .cjs files? I saw these being used in the src directory.
Thanks in advance and if you need more information, please ask and i'll try to provide it 😄
I have an idea, but am just shutting down to go away for the weekend.
Will try to look at it on Monday.
OK, am ready to work on this, and am pretty sure I know what the issue (and fix) is.
However, when I created a Vite demo project, everything seemed to work, but it could be I am missing something obvious in setup since I have no experience at all with Vite.
package.json
{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"@tailwindcss/forms": "^0.4.0",
"autoprefixer": "^10.4.2",
"tailwind-children": "^0.2.2",
"tailwindcss": "^3.0.23",
"vite": "^2.8.0"
}tailwind.config.js
const forms = require('@tailwindcss/forms');
const defaultTheme = require('tailwindcss/defaultTheme');
const children = require('tailwind-children');
module.exports = {
content: [
'*.html',
'*.js'
],
theme: {
extend: {},
},
plugins: [
forms,
children,
],
}index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<link rel="stylesheet" type="text/css" href="./tw.css" media="print" onload="this.media='all';">
</head>
<body>
<div id="app" class="bg-blue-400 child:text-green-200"></div>
<script type="module" src="/main.js"></script>
</body>
</html>main.js
import './style.css'
document.querySelector('#app').innerHTML = `
<h1 class='child'>Hello Vite!</h1>
<a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>relevant commands (in two tabs)
$ npx tailwindcss -o tw.css -mw
$ npm run dev
I get a page with the background set to blue, and the text of the header set to green.
How can I reproduce the error?
Thanks for taking a look! I'm gonna try to set up a repository which reproduces the bug so you can check that out. I'll update this comment when it's ready.
--- Edit ---
I've setup a basic repository which reproduces the bug for me:
https://github.com/Jannick94/vite-tailwind-children
Some more info on node/npm versions just to be sure:
node v17.3.0npm v8.3.1
Something I notice in your example is that you include the .css file by yourself, in this setup, vite injects this within the header by itself, maybe its something related to that?
Thanks!
Ahh, I see.
OK, hopefully will get this fixed today.
As an aside, Github only sends an email when commenting, not when you edit your comment. So, I didn't realize you had edited your comment to say that you had made a reproducible build till last night.
OK, just a short update, am still working on the "solution".
The issue - tailwind-children is a ES Module (ESM).
Tailwind is a Common JS module, and therefore expects for cjs to be required (require('tailwind-children')).
The solution - index.cjs is a tiny commonjs module - all it does is include the index.mjs source.
The issue - You can NOT directly import from fs paths in Vite. You need to use resolvers to do what you want to do.
The solution - Hmmm, mayb you can help? I never used Vite before, and am still trying to figure it up. What are resolvers?
Have merged #4 into this. Hopefully will have a chance to push at least a temp fix for this today.
Just pushed a update that should solve the issue, but I have not yet tested at all.
In addition it adds support for child-div:hover that will apply :hover to all child divs.
It is too late for me to work on this more tonight, but please test.