Setting up a project with Tailwind CSS, AlpineJS, PostCSS, and Webpack

This blog post provides a step-by-step guide on how to set up a development environment using Webpack, Tailwind CSS, and Alpine.js. The tutorial covers the initial project setup with npm, adding Tailwind CSS and configuring it, integrating Alpine.js for interactivity, and running and building the app using Webpack.

Screenshot

First initialize the project with npm

Open your terminal, create a project directory, and cd into the new directory. Then initialize the project with npm by executing the following script:

npm init -y
npm install webpack webpack-cli webpack-dev-server postcss-loader css-loader html-webpack-plugin style-loader copy-webpack-plugin --save-dev

Next create some basic files to work with:

touch webpack.config.js
touch postcss.config.js
mkdir dist
mkdir src
touch src/index.html
touch src/index.js
touch src/style.css

Then open the webpack.config.js and copy the following content:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    bundle: path.resolve(__dirname, 'src/index.js'),
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true,
    assetModuleFilename: '[name][ext]',
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src', '**', '*.{jpg,png,svg,ico,webmanifest}'),
          to({ context, absoluteFilename }) {
            const relativePath = path.relative(path.join(context, 'src'), absoluteFilename);
            return path.join(context, 'dist', relativePath);
          },
          context: __dirname,
          globOptions: {
            dot: false,
            ignore: ['**/node_modules/**'],
          },
        },
      ],
    }),   
  ],  
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'dist'),
    },
    port: 3000,
    open: true,
    hot: true,
    compress: true,
    historyApiFallback: true,
  }
};

Add Tailwind CSS to the project

Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Next add Tailwind CSS to your postcss.config.js file

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
  }

Configure your template paths in the tailwind.config.css

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Next add Tailwind CSS directives to your style.css

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

and include the css in the ìndex.js

import './style.css';

Now create an initial HTML page and include the css

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h1 class="p-3 text-center">
    Initial Webpack with Tailwind CSS
  </h1>
      <div class="w-64 py-16 mx-auto text-5xl text-red-700">
        <div x-data="{ show: false }">
          <button
            class="px-6 py-2 text-2xl text-white bg-blue-500 rounded shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50"
            @click="show = !show">
            Click me
          </button>
          <div x-show="show" class="my-16">
            <h1>Oh, hello!</h1>
          </div>
        </div>
      </div>  
  <script src="bundle.js"></script>
</body>
</html>

Finally add AlipineJS

Add the framework to the project:

npm i alpinejs --save-dev

Then you add AlpineJS to the ìndex.js

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

Run and build your app

First add scripts for this to your package.json:

"scripts": {
    "dev": "webpack serve",
    "build": "webpack"
  },

Then you can build once and create your dist/bundle.js

npm run build

In order to run your local development server with webpack

num run dev

Conclusion

In conclusion, this blog post offers a comprehensive guide on setting up a modern and efficient development environment using Webpack, Tailwind CSS, and Alpine.js. By following these steps, you will be able to create a streamlined and modular development process that takes advantage of the powerful features offered by these tools. As a result, you’ll be well-equipped to create scalable and maintainable web applications that are both visually appealing and highly interactive.

To help you get started, I’ve created a starter project on GitHub that includes all the necessary configuration files and dependencies to start building web applications with Tailwind CSS, AlpineJS, PostCSS, and Webpack. You can find the starter project here:

https://github.com/poornerd/tailwindcss-alpinejs-postcss-webpack-starter

If you made it this far, you may as well follow me on LinkedIn: Follow Brian Porter

← Previous Post Next Post →