#Hi , tailwind isnt working on my project
4 messages · Page 1 of 1 (latest)
Hi @mint bridge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
I'm sorry to hear that you're having trouble with Tailwind in your Astro project. There could be a few reasons why this is happening. Here are some potential solutions based on the knowledge sources:
- Check your Tailwind and Astro configuration: Make sure you've followed the correct steps to integrate Tailwind with Astro. This includes setting up your
tailwind.config.jsandastro.config.mjsfiles correctly. Here's an example of how they might look:
// tailwind.config.js
module.exports = {
mode: 'jit',
purge: ['./public/**/*.html', './src/**/*.{astro,js,jsx,ts,tsx,vue}'],
// more options here
};
// astro.config.mjs
export default {
devOptions: {
tailwindConfig: './tailwind.config.js',
}
};
(Source: Github Issue 740 (https://github.com/withastro/astro/issues/740))
-
Check your stylesheet links: There have been issues reported where the build process doesn't add the relative path to stylesheet links in all pages and subpages. You might need to manually correct the path in your
index.htmlfile. For example, if your build process produces this stylesheet link path:<link rel="stylesheet" href="/_astro/index-Z1KxXDx.css" type="text/css">, you might need to add a dot to thehrefpath like this:<link rel="stylesheet" href="./_astro/index-Z1KxXDx.css" type="text/css">.
(Source: Github Issue 740 (https://github.com/withastro/astro/issues/740)) -
Check your package manager: There have been issues reported with certain package managers. For example, one user reported that installing with npm worked fine, but yarn did not. If you're using yarn, you might want to try using npm instead, or vice versa.
(Source: Github Issue 7358 (https://github.com/withastro/astro/issues/7358))