Integrating Tailwind CSS and TypeScript into Craft CMS /w webpack

• Node.js and npm (LINK)
• Composer (LINK)
• Craft CMS (LINK)

First, we need to install Tailwind CSS and configure it in our Craft CMS project.

Navigate to your project directory and run the following command to install Tailwind CSS and its dependencies:

npm install tailwindcss postcss autoprefixer

Next, initialize Tailwind CSS by creating the default configuration files:

npx tailwindcss init

This will generate a tailwind.config.js file in your project root.

Update your tailwind.config.js to specify the paths to all of your template files:

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [
    "./src/**/*.{ts,js}",
    "./templates/**/*.twig",
    "./web/**/*.{html,php}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Create a CSS file where you'll include Tailwind's base styles, components, and utilities. For example, create a src/css/tailwind.css file and add the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

Create a postcss.config.js file in your project root with the following configuration:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

Run the following command to install TypeScript and necessary tooling:

npm install typescript ts-loader

Initialize TypeScript by creating a tsconfig.json file in your project root:

npx tsc --init

Modify the tsconfig.json to suit your project needs. Here's a basic example:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "rootDir": "./src",
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

Create a src/ts/index.ts file and add some TypeScript code:

const greeting: string = 'Hello, Craft CMS with TypeScript!';
console.log(greeting);

To compile TypeScript and bundle your JavaScript files, we'll set up Webpack. First, install Webpack and necessary loaders:

npm install webpack webpack-cli ts-loader

Create a webpack.config.js file in your project root:

const path = require("path");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.ts",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "web/dist"),
    publicPath: "/dist/",
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".js"],
  },
  plugins: [
    new BrowserSyncPlugin(
      {
        proxy: {
          target: "https://tailwind-blueprint.ddev.site",
          proxyRes: [
            function (proxyRes, req, res) {
              if (req.url.includes("/dist/")) {
                proxyRes.headers["Content-Type"] = "text/javascript";
              }
            },
          ],
        },
        files: ["templates/**/*", "src/**/*", "web/**/*"],
        port: 3000,
        open: true,
        notify: false,
      },
      {
        reload: false,
      }
    ),
    new webpack.DefinePlugin({
      WEBPACK_DEV_SERVER_URL: JSON.stringify("http://127.0.0.1:8080"),
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, "web"),
    },
    devMiddleware: {
      publicPath: "/dist/",
    },
    hot: true,
    liveReload: true,
    host: "localhost",
    port: 8080,
  },
  mode: "development",
};

In your Craft CMS templates, link the compiled CSS and JavaScript files. For example, in your templates/_layout.html file: