AZPrototype for TailwindCSS

Architecture

src
  index.html
  blog.html
  styles
    main.scss
    home.scss
  js
    main.js
    home.js
    blog.js
  assets
    fonts
    images
docs
  assets
    images
    fonts
  main.js
  home.js
  blog.js
  main.css
  home.css
  blog.css
  index.html
  blog.html

Configuration steps

yarn add webpack webpack-cli -D

yarn add style-loader css-loader postcss-loader postcss sass-loader sass -D

yarn add mini-css-extract-plugin -D

yarn add tailwindcss autoprefixer -D

yarn add html-webpack-plugin -D

yarn add html-loader -D

<%= require('html-loader!./partials/header.html').default %>

Google Fonts

@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap");

Google Material Icons

• https://developers.google.com/fonts/docs/material_icons

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

<span class="material-icons">face</span>

• Playground

References

• Materialize
• Assets Management