Can't get it to work with Vite as dev server #1

Jannick94 · 2022-02-25T10:27:53Z

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 😄

The text was updated successfully, but these errors were encountered:

SamGoody · 2022-02-25T10:37:24Z

I have an idea, but am just shutting down to go away for the weekend.

Will try to look at it on Monday.

SamGoody · 2022-02-28T12:01:26Z

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?

Jannick94 · 2022-02-28T13:22:16Z

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.0
npm 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!

SamGoody · 2022-03-02T12:49:24Z

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.

SamGoody · 2022-03-02T16:53:39Z

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?

SamGoody · 2022-04-12T09:18:01Z

Have merged #4 into this. Hopefully will have a chance to push at least a temp fix for this today.

SamGoody · 2022-04-14T23:32:15Z

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.

fitfab · 2022-05-20T14:04:03Z

@SamGoody -- i have the same problem. I can't get it to work within my Vite project with versions below:

    "@tailwindcss/line-clamp": "^0.4.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "tailwind-children": "^0.5.0",
    "tailwindcss": "^3.0.24"

SamGoody mentioned this issue Apr 12, 2022

Cannot find module 'tailwindcss-children' #4

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can't get it to work with Vite as dev server #1

Can't get it to work with Vite as dev server #1

Jannick94 commented Feb 25, 2022

SamGoody commented Feb 25, 2022 •

edited

Loading

SamGoody commented Feb 28, 2022 •

edited

Loading

Jannick94 commented Feb 28, 2022 •

edited

Loading

SamGoody commented Mar 2, 2022

SamGoody commented Mar 2, 2022 •

edited

Loading

SamGoody commented Apr 12, 2022

SamGoody commented Apr 14, 2022

fitfab commented May 20, 2022

Can't get it to work with Vite as dev server #1

Can't get it to work with Vite as dev server #1

Comments

Jannick94 commented Feb 25, 2022

The issue

Package versions

Possible solution

SamGoody commented Feb 25, 2022 • edited Loading

SamGoody commented Feb 28, 2022 • edited Loading

package.json

tailwind.config.js

index.html

main.js

relevant commands (in two tabs)

Jannick94 commented Feb 28, 2022 • edited Loading

SamGoody commented Mar 2, 2022

SamGoody commented Mar 2, 2022 • edited Loading

SamGoody commented Apr 12, 2022

SamGoody commented Apr 14, 2022

fitfab commented May 20, 2022

SamGoody commented Feb 25, 2022 •

edited

Loading

SamGoody commented Feb 28, 2022 •

edited

Loading

Jannick94 commented Feb 28, 2022 •

edited

Loading

SamGoody commented Mar 2, 2022 •

edited

Loading