3
Launch Terminal
Start a command prompt window or terminal and change directory to the package's root directory.
cd metronic-tailwind-html
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 the
webpack.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",
