Tailwind css "npm run watch" is not working
I am working on Magento 2. We are using tailwind for design.
Here is my tailwind directory
app/design/frontend/ThemeVendor/themename/web/tailwind/
in here I have package.json it contains below code
{
"name": "some them name",
"version": "3.0.0",
"description": "some theme desc",
"main": "tailwind.config.js",
"dependencies": {
"@some-themes/some-modules": "^1.0.4",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/typography": "^0.5.7",
"autoprefixer": "^10.4.14",
"browser-sync": "^2.27.10",
"postcss-import": "^14.1.0",
"tailwindcss": "^3.2.4",
"watch": "^1.0.2"
},
"devDependencies": {
"postcss": "^8.4.24"
},
"scripts": {
"build": "NODE_ENV=production npx tailwindcss --postcss -i tailwind-source.css -o ../css/styles.css --minify",
"watch": "NODE_ENV=development npx tailwindcss --postcss -i tailwind-source.css -o ../css/styles.css --watch --verbose",
"build-dev": "echo DEVELOPMENT builds are NOT SUPPORTED by tailwind v3, please use the 'watch' or 'build-prod' commands instead. && exit 1",
"build-prod": "npm run build && npm run output-success",
"browser-sync": "browser-sync start --config ./browser-sync.config.js",
"output-success": "echo \"\\033[0;32mDone!\\033[0m\""
},
"engines": {
"node": ">=14.0.0"
},
"author": "Some Themes BV",
"license": "proprietary",
"private": true
}
in the same directory I have tailwind.config.js which contains below code
const {
spacing
} = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');
const someModules = require('@some-themes/some-modules');
module.exports = somethemeModules.mergeTailwindConfig({
theme: {
extend: {
screens: {
'sm': '640px',
// => @media (min-width: 640px) { ... }
'md': '768px',
// => @media (min-width: 768px) { ... }
'lg': '1024px',
// => @media (min-width: 1024px) { ... }
'xl': '1280px',
// => @media (min-width: 1280px) { ... }
'2xl': '1536px' // => @media (min-width: 1536px) { ... }
},
fontFamily: {
sans: ["Segoe UI", "Helvetica Neue", "Arial", "sans-serif"],
'openSans':['Open Sans'],
'squar':['Squartiqa4F'],
'squarLight':['Squartiqa4FLight'],
},
colors: {
primary: {
lighter: colors.blue['300'],
"DEFAULT": colors.blue['800'],
darker: colors.blue['900']
},
secondary: {
lighter: colors.blue['100'],
"DEFAULT": colors.blue['200'],
darker: colors.blue['300']
},
background: {
lighter: colors.blue['100'],
"DEFAULT": colors.blue['200'],
darker: colors.blue['300']
},
green: colors.emerald,
yellow: colors.amber,
purple: colors.violet
},
textColor: {
orange: colors.orange,
red: { ...colors.red,
"DEFAULT": colors.red['500']
},
primary: {
lighter: colors.gray['700'],
"DEFAULT": colors.gray['800'],
darker: colors.gray['900']
},
secondary: {
lighter: colors.gray['400'],
"DEFAULT": colors.gray['600'],
darker: colors.gray['800']
}
},
backgroundColor: {
primary: {
lighter: colors.blue['600'],
"DEFAULT": colors.blue['700'],
darker: colors.blue['800']
},
secondary: {
lighter: colors.blue['100'],
"DEFAULT": colors.blue['200'],
darker: colors.blue['300']
},
container: {
lighter: '#ffffff',
"DEFAULT": '#fafafa',
darker: '#f5f5f5'
}
},
borderColor: {
primary: {
lighter: colors.blue['600'],
"DEFAULT": colors.blue['700'],
darker: colors.blue['800']
},
secondary: {
lighter: colors.blue['100'],
"DEFAULT": colors.blue['200'],
darker: colors.blue['300']
},
container: {
lighter: '#f5f5f5',
"DEFAULT": '#e7e7e7',
darker: '#b6b6b6'
}
},
minWidth: {
8: spacing["8"],
20: spacing["20"],
40: spacing["40"],
48: spacing["48"]
},
minHeight: {
14: spacing["14"],
'screen-25': '25vh',
'screen-50': '50vh',
'screen-75': '75vh'
},
maxHeight: {
'0': '0',
'screen-25': '25vh',
'screen-50': '50vh',
'screen-75': '75vh'
},
container: {
center: true,
padding: '1.5rem'
}
}
},
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
// Examples for excluding patterns from purge
content: [
'../../**/*.phtml',
'../../*/layout/*.xml',
'../../../../../../../app/code/**/*.phtml',
]
});
In the same directory I have postcss.config.js which containes below code
const { postcssImportSomethemeModules } = require("@some-themes/some-modules");
module.exports = {
plugins: [
postcssImportSomeModules,
require('postcss-import'),
require('tailwindcss/nesting'),
require('tailwindcss'),
require('autoprefixer'),
]
}
In the same directory I have tailwind-source.css which contains
/* purgecss start ignore */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import url(components/category-page.css);
@import url(components/product-prices.css);
@import url(components/cart.css);
@import url(components/customer.css);
@import url(components/forms.css);
@import url(components/messages.css);
@import url(components/product-list.css);
@import url(components/product-page.css);
@import url(components/wishlist.css);
@import url(components/modal.css);
@import url(components/slider.css);
@import url(components/structure.css);
@import url(components/swatches.css);
@import url(components/button.css);
@import url(components/theming.css);
@import url(components/transitions.css);
@import url(components/typography.css);
@import url(components/page-builder.css);
@import url(components/input.css);
/* purgecss end ignore */
@import "tailwindcss/utilities";
@import "theme.css";
In this directory app/design/frontend/ThemeVendor/themename/web/css/
I have my styles.css
Now in the terminal if go to ..app/design/frontend/ThemeVendor/themename/web/tailwind/
and run num run build-prod it generates new css in styles.css
But when I run npm run watch
and if I change anything in my html,phtml files
It shows Rebulding has done but what it does is it only unminify my css/styles.css
It does not add new css as I change my html,phtml files
For example if I add in footer.phtml
<h1 class="bg-pink-400">Test</h1>
now bg-pink-400 is a tailwind class but when I use npm run watch
It does not add css for that in my css/styles.css
But When I run npm run build-prod It does and changes shows up when I reload page
So basicaly command npm run build-prod works and npm run watch does not work.
...app/design/frontend/ThemeVendor/themename/web/tailwind/ directory
Let me know if you want to know code of any other files Any help or guidance would be great.
Update to my issue:
if I make my tailwind-source.css file like this
/* purgecss start ignore */
/*@import "tailwindcss/base";
@import "tailwindcss/components";*/
/*@import url(components/category-page.css);
@import url(components/product-prices.css);
@import url(components/cart.css);
@import url(components/customer.css);
@import url(components/forms.css);
@import url(components/messages.css);
@import url(components/product-list.css);
@import url(components/product-page.css);
@import url(components/wishlist.css);
@import url(components/modal.css);
@import url(components/slider.css);
@import url(components/structure.css);
@import url(components/swatches.css);
@import url(components/button.css);
@import url(components/theming.css);
@import url(components/transitions.css);
@import url(components/typography.css);
@import url(components/page-builder.css);
@import url(components/input.css);*/
/* purgecss end ignore */
/*@import "tailwindcss/utilities";
@import "theme.css";*/
@tailwind base;
@tailwind components;
@tailwind utilities;
I have commented everything and kept below code
@tailwind base;
@tailwind components;
@tailwind utilities;
Doing this my npm run watch command works and it generates css for classes as Add in any html,phtml files in css/styles.css
So maybe now if anyone can help why is that?
I got my solution like this
app/design/frontend/ThemeVendor/themename/web/tailwind$
cat /proc/sys/fs/inotify/max_user_watches
out put was - 29933
we changed it to - 524288
Now npm run watch command is working fine. It's adding css as I add class in any phtml files