1
Download
Download the latest Metronic from Themeforest.
2
3
Launch Terminal
Start a command prompt window or terminal and change directory to the package's root directory.
cd metronic-tailwind-html-demos
4
Install NPM
Install the latest NPM.
npm install --global npm@latest
Run npm cache clean --force command, if the installation had failed at any step. Retry again from beginning once its done.
5
Install Dependencies
Install Metronic dependencies defined in
packages.json.
npm install
6
Build
Run the below command to build all assets(JavaScript, CSS, fonts, vendors) into
dist/assets directory.
npm run build
7
Build JavaScript
Run the below command to build JavaScript files into
dist/assets/js directory.
npm run build:js
8
Build CSS
Run the below command to build CSS files into
dist/assets/css directory.
npm run build:css
9
Watch CSS
Run the below command to watch CSS file changes to autocompile on fly into
dist/assets/css directory.
npm run build:css:watch
Recompiling your CSS is mandatory with Tailwind whenever you change classes in your HTML. This ensures Tailwind includes all required classes, as it optimizes the CSS based on your current HTML code.
10
Build for Production
Run the following command to build production-ready assets(JavaScript, CSS, fonts, vendors) into
dist/assets directory.
This process ensures that JavaScript and CSS files are minified, optimizing them for enhanced performance.
npm run build:prod
Build Config
By default, the build output is
dist/assets. You can change it in the config if you wish to modify the output path.
1
Modify webpack.vendors.js
Open thewebpack.vendors.js file and update the output configuration. Modify the config output: 'dist/assets', with your preferred path, for example, ../my-project/www/assets.
2
Modify package.json
Open the
package.json file and modify the output path. For example, change dist/assets to ../my-project/www/assets.
"build:css": "npx tailwindcss -i ./src/css/styles.css -o ./dist/assets/css/styles.css",
"build:css:watch": "npx tailwindcss -i ./src/css/styles.css -o ./dist/assets/css/styles.css --watch",
"build:prod": "npx tailwindcss -i ./src/css/styles.css -o ./dist/assets/css/styles.css --minify && npx webpack --env production",
below is an example of the updated
package.json file with the new output path.
"build:css": "npx tailwindcss -i ./src/css/styles.css -o ../my-project/www/assets/css/styles.css",
"build:css:watch": "npx tailwindcss -i ./src/css/styles.css -o ../my-project/www/assets/css/styles.css --watch",
"build:prod": "npx tailwindcss -i ./src/css/styles.css -o ../my-project/www/assets/css/styles.css --minify && npx webpack --env production",
