pavelloz / webpack-tailwindcss

Use TailwindCSS with Webpack. Build your assets quickly with ESBuild.

Home Page:https://pavelloz.github.io/webpack-tailwindcss/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

webpack-tailwindcss

This template is made to help start your project based on Webpack + TailwindCSS. JS is built and minified by ESBuild to keep it fast no matter what you do.

Build preview is available at: https://pavelloz.github.io/webpack-tailwindcss/

Usage

  1. To use this template, click "Use this template" green button in the top right.
  2. Clone the repository to your computer
  3. Install dependencies - pnpm i
  4. Configure where your views are in tailwind.config.js.

npm/pnpm tasks

  • pnpm start - runs dev server on http://localhost:8888 and reloads the browser on changes
  • pnpm build - build assets in production mode, ready to deploy

Webpack setup includes

  • JS and CSS transpilation and minification done by ESBuild (FAST)
  • CSS extraction using mini-css-extract-plugin
  • HTML generation using html-webpack-plugin
  • Examples:
    • Prefetched chunk, if you want to load faster critical parts of your build
    • Asynchronously loaded chunks, to block page rendering when loading/parsing/executing
    • Named chunks if you dont want your chunks to look like 2aae6c35c94fcfb415dbe95f408b9ce91ee846ed.js

PostCSS setup includes

  • autoprefixer - Adding vendor prefixes, just in case. See package.json for browserslist config
  • postcss-import - Support for @imports - just like in SASS

TailwindCSS setup includes

  • Official TailwindCSS forms plugin loaded
  • Examples:
    • Extending default color palette
    • Setting custom font as first in font family declaration
    • Custom (xxl) breakpoint for responsive purposes
    • Custom variant for border width property

Notes

  • Before every build, build directory (dist) is deleted to avoid deploying old assets

Additional resources

Github Actions

TODO

E2E tests

TODO

Happy coding!

TODO

  • Migrate to pnpm
  • Add node_modules caching in GHA to speed up builds
  • Write simple cypress test run on the example, after the deployment
  • Split webpack configs into common + dev/prod to avoid pushing to plugins array

About

Use TailwindCSS with Webpack. Build your assets quickly with ESBuild.

https://pavelloz.github.io/webpack-tailwindcss/


Languages

Language:HTML 68.5%Language:JavaScript 28.9%Language:CSS 2.6%