Integrate TailwindCSS instead of WindiCSS

[23tux]

I'd like to use TailwindCSS, because it doesn't fully support V3 (see windicss/windicss#593).

I followed this guide here https://tailwindcss.com/docs/guides/vite and run into a problem: When I start my dev server with bin/vite dev my stylesheets aren't compiled. I see this in the JS console:

application.js:1 
 GET http://localhost:4000/vite-dev/entrypoints/application.tailwind.css net::ERR_ABORTED 404 (Not Found)

But when I change something in my application.js, it gets compiled and the CSS is generated. At least I see my styles here. Also HMR works now. I'm kinda stuck here, so I'm grateful for any help. Furthermore, I'm not sure if I integrated everything the right way.

This is my vite.config.ts. I'm not sure if I even need the import tailwind... code here:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import EnvironmentPlugin from 'vite-plugin-environment'
import FullReload from 'vite-plugin-full-reload'
import RubyPlugin from 'vite-plugin-ruby'
import tailwindcss from 'tailwindcss';

export default defineConfig({
  resolve: {
    alias: { 'vue': 'vue/dist/vue.esm-bundler.js' }
  },
  plugins: [
    vue(),
    EnvironmentPlugin({ test_env: 'XXX' }),
    FullReload(['config/routes.rb', 'app/views/**/*', 'app/frontend/components/App.vue']),
    RubyPlugin(),
    tailwindcss(),
  ],
})

tailwind.config.js

module.exports = {
  content: [
    './app/views/**/*.{html,html.erb,erb}',
    './app/frontend/entrypoints/*.{vue,js,ts,css}',
    './app/frontend/**/*.{vue,js,ts,css}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

package.json

{
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.2.0",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.18",
    "sass": "^1.56.0",
    "tailwindcss": "^3.2.1",
    "vite": "^3.2.2",
    "vite-plugin-environment": "^1.1.3",
    "vite-plugin-full-reload": "^1.0.4",
    "vite-plugin-ruby": "^3.1.2",
    "vue": "^3.2.41"
  },
  "dependencies": {
    "@heroicons/vue": "^2.0.13"
  }
}

app/frontend/entrypoints/application.js

import "./application.tailwind.css"
console.log("js loaded");

[ElMassimo]

Hi Hubert!

Here's an open source app which uses Tailwind CSS.

You should not add tailwindcss as a Vite plugin (it doesn't provide a plugin for Vite, see installation instructions).

I'd recommend skipping the .tailwind extension—which could be interfering with Vite's dev server—and renaming the file to application.css.

---

If you don't need to inject styles separately from scripts, I'd recommend moving the file out of entrypoints, and instead place it in app/frontend/styles/application.css, importing it as:

import "~/styles/application.css"

That will allow Rollup to create a more efficient bundle.

[23tux]

Thank you so much, now it get's compiled when I start the server.

Could you elaborate, why Rollup can generate a more efficient bundle if I put it into a different folder?

[ElMassimo]

Anything files in entrypoints will generate a corresponding Rollup entrypoint, forcing Rollup to generate a compiled equivalent of that file and its contents.

For example, if your application.js imports more CSS, Rollup will still generate a minified version of application.css, resulting in two CSS files.

If you place it outside entrypoints, Rollup can combine application.css with the rest of the CSS imports in application.js into a single CSS file.

So depending on what you are doing, is how you would want to split it, but if you are not using vite_stylesheet_tag you typically don't need it to be an entrypoint.