tailwind css not working in laravel

Avatar
sohail Ahmad
Created

hi i just installed new laravel project with jetstream and for some reason tailwind css is not working this is the error in get in my notifictaion

and yes node is enabled in the project i checked

```
Tailwind CSS: Tailwind CSS: require() of ES Module /mnt/DevOps/devops/BMS-Enterprises/test/tailwind.config.js from /opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server not supported. Instead change the require of tailwind.config.js in /opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server to a dynamic import() which is available in all CommonJS modules. Error [ERR_REQUIRE_ESM]: require() of ES Module /mnt/DevOps/devops/BMS-Enterprises/test/tailwind.config.js from /opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server not supported. Instead change the require of tailwind.config.js in /opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server to a dynamic import() which is available in all CommonJS modules. at TA._require.Ka.default.require (/opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:300:1554) at /opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:723:10601 at Generator.next ( ) at /opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:2:1219 at new Promise ( ) at eH (/opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:2:1039) at Z (/opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:723:9512) at /opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:723:4811 at Generator.next ( ) at /opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:2:1219 at new Promise ( ) at eH (/opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:2:1039) at E (/opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:723:4769) at /opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:723:9486 at Generator.next ( ) at /opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:2:1219 at new Promise ( ) at eH (/opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:2:1039) at k (/opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:723:4859) at Object.  (/opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:723:4721) at Generator.next ( ) at /opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:2:1219 at new Promise ( ) at eH (/opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:2:1039) at Object.y [as tryInit] (/opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:723:4679) at /opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:725:13504 at J8.invoke (/opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:137:14414) at np.fire (/opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:137:15184) at /opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:168:59532 at Ce (/opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:139:1590) at _e (/opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:138:6848) at Immediate.  (/opt/Phpstorm/PhpStorm-231.8109.199/plugins/tailwindcss/server/tailwindcss-language-server:138:6726)
```

my package.json

```

"devDependencies": {
"@alpinejs/focus": "^3.10.5",
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/typography": "^0.5.0",
"alpinejs": "^3.0.6",
"autoprefixer": "^10.4.7",
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.7.5",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.0",
"vite": "^4.0.0"
}


```

my tailwind config

```

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';

/** @type {import('tailwindcss').Config} */
export default {
content: [
 './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],

theme: {
extend: {
fontFamily: {
sans: ['Figtree', ...defaultTheme.fontFamily.sans],
},
},
},

plugins: [forms, typography],
};

Votes

0

Share

3 comments
Avatar
Elena Pogorelova
Created

https://youtrack.jetbrains.com/issue/WEB-60296/Tailwind-autocomplete-does-not-work-in-version-2023.1-with-ESM-projects is fixed in 2023.1.1, please consider upgrading PHPStorm to the latest version

0
Avatar
sohail Ahmad
Created

Elena Pogorelova 
thnx that did the trick but now tailwind css in not working in my other existing project i did upgrade tailwind css to 3.2.2

0
Avatar
sohail Ahmad
Created

Elena Pogorelova never mind it start working on it own after a restart you now phpstrom is a amazing ide but something it can be really annoying

0

Please sign in to leave a comment.