Is Tailwind / Bootstrap Css supported in faust js projects. If yes how can we setup it?

[Anurag931999]

I am trying to integrate tailwind css with faust js app. I am using Next js framework for this. Tried installing tailwind packages and using it but i didnt work. Is tailwind or bootstrap supported other than normalize css in faust??
If yes what are the steps to setup it?
Can anyone suggest?
Thanks in advance!

[theodesp]

Hello @Anurag931999 of course you can integrate both tailwind or bootstrap.

For tailwind.css you just have to use the following tutorial guide:
https://tailwindcss.com/docs/guides/nextjs

For bootstrap you just have to require bootstrap:

npm install bootstrap

Then import it inside the _app.tsx file:

// add bootstrap css 
useEffect(() => {
    import("bootstrap/dist/js/bootstrap");
}, []);

[nicholaspretorius]

Keep in mind that if you are using the Faust.js Next App Router example, the steps described in the Tailwind CSS docs linked above are not sufficient.

When using create-next-app, with or without Tailwind CSS, create-next-app will automatically create a globals.css file which is imported into layout.tsx.

When using Faust with the @faustwp/experimental-app-router as described in the Faust.js App Router blog post, Faust will not create a globals.css file for you, nor include it into layout.tsx.

As such, there are two missing steps from the linked documentation in getting Tailwind to work with Faust.js specifically:

1. create a globals.css file at the root of your /app folder
2. import "globals.css"; into your layout.tsx file.

Tailwind should now be working as long as you have followed all the necessary steps!

[alsherif-khalaf]

I followed the instructions but I got this error message

`
Error [ERR_REQUIRE_ESM]: require() of ES Module E:\Dev\headless-wp\app-router\postcss.config.js from E:\Dev\headless-wp\app-router\node_modules\next\dist\lib\find-config.js not supported.
Instead change the require of postcss.config.js in E:\Dev\headless-wp\app-router\node_modules\next\dist\lib\find-config.js to a dynamic import() which is available in all CommonJS modules.
at mod.require (E:\Dev\headless-wp\app-router\node_modules\next\dist\server\require-hook.js:65:28)
at findConfig (E:\Dev\headless-wp\app-router\node_modules\next\dist\lib\find-config.js:58:20)
at async getPostCssPlugins (E:\Dev\headless-wp\app-router\node_modules\next\dist\build\webpack\config\blocks\css\plugins.js:89:18)
at async E:\Dev\headless-wp\app-router\node_modules\next\dist\build\webpack\config\blocks\css\index.js:124:36
at async Object.resolveUrlLoader (E:\Dev\headless-wp\app-router\node_modules\next\dist\build\webpack\loaders\resolve-url-loader\index.js:60:25) {
code: 'ERR_REQUIRE_ESM'
}
Error [ERR_REQUIRE_ESM]: require() of ES Module E:\Dev\headless-wp\app-router\postcss.config.js from E:\Dev\headless-wp\app-router\node_modules\next\dist\lib\find-config.js not supported.
Instead change the require of postcss.config.js in E:\Dev\headless-wp\app-router\node_modules\next\dist\lib\find-config.js to a dynamic import() which is available in all CommonJS modules.
at mod.require (E:\Dev\headless-wp\app-router\node_modules\next\dist\server\require-hook.js:65:28)
at findConfig (E:\Dev\headless-wp\app-router\node_modules\next\dist\lib\find-config.js:58:20)
at async getPostCssPlugins (E:\Dev\headless-wp\app-router\node_modules\next\dist\build\webpack\config\blocks\css\plugins.js:89:18)
at async E:\Dev\headless-wp\app-router\node_modules\next\dist\build\webpack\config\blocks\css\index.js:124:36
at async Object.resolveUrlLoader (E:\Dev\headless-wp\app-router\node_modules\next\dist\build\webpack\loaders\resolve-url-loader\index.js:60:25) {
code: 'ERR_REQUIRE_ESM'
}
⨯ unhandledRejection: Error [ERR_REQUIRE_ESM]: require() of ES Module E:\Dev\headless-wp\app-router\postcss.config.js from E:\Dev\headless-wp\app-router\node_modules\next\dist\lib\find-config.js not supported.
Instead change the require of postcss.config.js in E:\Dev\headless-wp\app-router\node_modules\next\dist\lib\find-config.js to a dynamic import() which is available in all CommonJS modules.
at mod.require (E:\Dev\headless-wp\app-router\node_modules\next\dist\server\require-hook.js:65:28)
at findConfig (E:\Dev\headless-wp\app-router\node_modules\next\dist\lib\find-config.js:58:20)
at async getPostCssPlugins (E:\Dev\headless-wp\app-router\node_modules\next\dist\build\webpack\config\blocks\css\plugins.js:89:18)
at async E:\Dev\headless-wp\app-router\node_modules\next\dist\build\webpack\config\blocks\css\index.js:124:36
at async Object.resolveUrlLoader (E:\Dev\headless-wp\app-router\node_modules\next\dist\build\webpack\loaders\resolve-url-loader\index.js:60:25) {
code: 'ERR_REQUIRE_ESM'
}
⨯ unhandledRejection: Error [ERR_REQUIRE_ESM]: require() of ES Module E:\Dev\headless-wp\app-router\postcss.config.js from E:\Dev\headless-wp\app-router\node_modules\next\dist\lib\find-config.js not supported.
Instead change the require of postcss.config.js in E:\Dev\headless-wp\app-router\node_modules\next\dist\lib\find-config.js to a dynamic import() which is available in all CommonJS modules.
at mod.require (E:\Dev\headless-wp\app-router\node_modules\next\dist\server\require-hook.js:65:28)
at findConfig (E:\Dev\headless-wp\app-router\node_modules\next\dist\lib\find-config.js:58:20)
at async getPostCssPlugins (E:\Dev\headless-wp\app-router\node_modules\next\dist\build\webpack\config\blocks\css\plugins.js:89:18)
at async E:\Dev\headless-wp\app-router\node_modules\next\dist\build\webpack\config\blocks\css\index.js:124:36
at async Object.resolveUrlLoader (E:\Dev\headless-wp\app-router\node_modules\next\dist\build\webpack\loaders\resolve-url-loader\index.js:60:25) {
code: 'ERR_REQUIRE_ESM'
}

`