/tailwind-hello-1

Barebones html + tailwind.css + tailwind.config.js config to test optimized tailwind production builds

Primary LanguageCSS

  1. Create tailwind.config.js: npx -i tailwindcss

  2. Configure tailwind.config.js:

module.exports = {
  purge: [
    './**/*.html'
  ],
  theme: {},
  variants: {},
  plugins: [],
}
  1. Create infile.css:
@tailwind base;
@tailwind components;
@tailwind utilities;

  1. Watch for changes: $ npx tailwindcss -i infile.css -o outfile.css --watch

  2. index.html:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="./outfile.css" rel="stylesheet">
</head>
<body>
  <h1 class="font-bold text-5xl text-red-500">TAILWIND-CSS</h1>
</body>
</html>
  1. Refactor classes as components:
// infile.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
  .my-title {
    @apply font-bold text-5xl text-red-500;
  }
}
  1. Update index.html:
<h1 class="my-title"> TAILWIND-CSS</h1>
  1. When ready to deploy hence optimize: NODE_ENV=production npx tailwindcss -i infile.css -o outfile.css