Migrating from MaterializeCSS to TailwindCSS, CSS bundle size, HTML templates

[greenpau]

I am working on converting my website to use TailwindCSS. Previously, I designed the website around MaterializeCSS.

I don't use any of the popular frameworks mentioned in Installation - Integration Guides, just pure HTML for the most part.

The caveat is the HTML is in Golang html/template format:

• https://github.com/greenpau/caddy-auth-portal/blob/main/assets/templates/basic/login.template
• https://github.com/greenpau/caddy-auth-portal/blob/main/assets/templates/basic/whoami.template

build process

First, install prerequisites. The -D, --save-dev add the packages to
devDependencies:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Next, create PostCSS config file (postcss.config.js):

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Then, create Tailwind CCS config file (tailwind.config.js):

npx tailwindcss init

Create directory for tailwindcss:

mkdir -p mods/tailwindcss

Add ./mods/tailwindcss/styles.css:

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

Then, generate

npx tailwindcss -i ./mods/tailwindcss/styles.css -o ./assets/css/tailwind.css

Question

Currently, the output css file is 3.9M.

$ ls -alh ./assets/css/tailwind.css
-rw-rw-r-- 1 greenpau greenpau 3.9M Nov 13 14:00 ./assets/css/tailwind.css

What do I need to do to make npx tailwindcss aware of my .template files and prune unnecessary CSS?

[dance2die]

If you specify a purge option, unused CSS wont' be generated.

[greenpau]

If you specify a purge option, unused CSS wont' be generated.

@dance2die , the issue is that I have .template files which could be an issue for the purgecss.

[adamwathan]

Everything you need to know should be covered in the documentation:

https://tailwindcss.com/docs/optimizing-for-production

Just pass the paths to your template files, for example:

// tailwind.config.js
module.exports = {
  purge: [
    './assets/templates/**/*.template',
  ],
  theme: {},
  variants: {},
  plugins: [],
}

I'm not sure exactly what your paths are since I don't know your project, but it the .template extension isn't a problem at all. We are just doing a very primitive regex search through the file contents, we don't care what language or format it is 👍

[greenpau]

@dance2die , @adamwathan , thank you! Will try it out 👍