I like using Tailwind CSS in my React and Laravel projects.
Now I've started learning NestJS and I want to use Tailwind CSS in my project, but I couldn't.
Since I couldn't find any results on Google, I'm asking you guys.
I would be grateful for any resource or your detailed answer.
The current state of my project is as follows. I don't know where I went wrong, TailwindCSS is not working.
Please note that I am just starting to learn NestJS.
main.ts
import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express';
import { join } from 'path';
import { AppModule } from './app.module';
async function bootstrap() {
const app = await NestFactory.create<NestExpressApplication>(AppModule);
app.useStaticAssets(join(__dirname, '..', 'public'));
app.setBaseViewsDir(join(__dirname, '..', 'views'));
app.setViewEngine('hbs');
await app.listen(3000);
console.log(`Application is running on: ${await app.getUrl()}`);
}
bootstrap();
app.controller.ts
import { Controller, Get, Render } from '@nestjs/common';
@Controller()
export class AppController {
@Get()
@Render('index')
root() {
return { message: 'Hello world!' };
}
}
app.module.ts
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
@Module({
imports: [],
controllers: [AppController],
providers: [],
})
export class AppModule {}
tailwind.config.js
module.exports = {
content: ['./views/*.hbs', './views/**/*.hbs'],
theme: {
extend: {},
},
plugins: [],
};
webpack-hmr.config.js
const nodeExternals = require('webpack-node-externals');
const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');
module.exports = function (options, webpack) {
return {
...options,
//entry: ['webpack/hot/poll?100', options.entry],
entry: './src/main.ts',
externals: [
nodeExternals({
allowlist: ['webpack/hot/poll?100'],
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
},
},
],
},
{
test: /\.ts$/,
use: [{ loader: 'ts-loader' }],
},
],
},
plugins: [
...options.plugins,
new webpack.HotModuleReplacementPlugin(),
new webpack.WatchIgnorePlugin({
paths: [/\.js$/, /\.d\.ts$/],
}),
new RunScriptWebpackPlugin({ name: options.output.filename }),
],
};
};
index.hbs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>NestJS App With TailwindCSS</title>
<link rel="stylesheet" href="/assets/css/tailwind.css">
</head>
<body>
<header class="w-full px-8 text-gray-700 bg-white flex">
<h1 class="bg-slate-200">
{{ message }}
</h1>
</header>
</body>
</html>
and script command
"start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch",
