Starting the Tailwind CLI build process | Astro Lounge | Page 1

silver lily Jan 2, 2024, 1:56 AM

#

Hello,

I am attempting to use the tailwind integration in Astro and I am not sure how to get the tailwind build process to happen like it suggests in the tailwind docs:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Right now, I am having to restart my dev server to see updates to tailwind class calls.
When I was using tailwind with express I was able to see my changes dynamically as they happened by running the command I shared above.

My question is, does anyone know how to get tailwind to auto-build based off of changes using the tailwind integration?

Thank you,
Boysie

sharp ember Jan 2, 2024, 2:04 AM

#

Hello! The styles should definitely update without needing to restart the dev server

#

Could you send the result of the astro info command?

silver lily Jan 2, 2024, 2:14 AM

#

npm run astro info

[email protected] astro
astro info

Astro v4.0.8
Node v20.10.0
System Linux (x64)
Package Manager npm
Output server
Adapter <@&1055234544183287879>/node
Integrations <@&1055234544183287879>/tailwind
<@&1055234544183287879>/react

#

cat tailwind.config.mjs
/** @type {import('tailwindcss').Config} /
export default {
content: ['./src/**/.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {},
},
plugins: [],
}

#

cat astro.config.mjs
import { defineConfig } from 'astro/config';
import node from '<@&1055234544183287879>/node';
import tailwind from '<@&1055234544183287879>/tailwind';
import react from '<@&1055234544183287879>/react';

export default defineConfig({
site: 'https://boysenberrys.com',
output: 'server',
adapter: node({
mode: 'middleware'
}),
integrations: [tailwind(), react()],
compressHTML: true,
server: {
port: 3000
}
});⏎

#

Now that I am paying attention a little better, it's not just tailwind. I had tunnel vision.
None of my changes are showing without restarting.
It says it's watching, but I guess it's not

sharp ember Jan 2, 2024, 2:27 AM

#

Hmm, that's odd. I'm not sure what could be causing that. Could you try cloning the minimal example and see if you get the same issue?
https://github.com/withastro/astro/tree/latest/examples/minimal?file=README.md

silver lily Jan 2, 2024, 2:27 AM

#

Yes, I am going to try a clean install to see what I did to reproduce.
I was fixing other issues and might have broke something without knowing it

silver lily Jan 2, 2024, 3:07 AM

#

Okay, I figured out what was going wrong.
I am using WSL2 (Ubuntu installed in Windows 11) and had my install in a mounted windows directory.
Once I set it up in the Linux directory system it began to work as expected.
I guess this is just another one of my stupid human tricks.
Thanks for taking the time to look into it with me, kept me moving along trying to figure it out.

#Starting the Tailwind CLI build process