Support for Tailwind CSS version 3
rexarvind opened this issue · comments
This is shown in console and report is not generated
Ensure that files to `purge` are configured in your tailwind config file
Hello,
I have the same error.
Even if I configure manually the purge option in tailwind.config.js I end up having this error :
node:internal/errors:464
ErrorCaptureStackTrace(err);
^
<ref *1> Error: spawnSync npx ENOENT
at Object.spawnSync (node:internal/child_process:1083:20)
at spawnSync (node:child_process:812:24)
at Object.execFileSync (node:child_process:858:15)
at _callee$ (E:\***\node_modules\tailwindcss-analysis\dist\tailwindcss-analysis.cjs.development.js:1323:27)
at tryCatch (E:\***\node_modules\tailwindcss-analysis\dist\tailwindcss-analysis.cjs.development.js:139:40) at Generator.invoke [as _invoke] (E:\***\node_modules\tailwindcss-analysis\dist\tailwindcss-analysis.cjs.development.js:369:22)
at Generator.next (E:\***\node_modules\tailwindcss-analysis\dist\tailwindcss-analysis.cjs.development.js:194:21)
at asyncGeneratorStep (E:\***\node_modules\tailwindcss-analysis\dist\tailwindcss-analysis.cjs.development.js:21:24)
at _next (E:\***\node_modules\tailwindcss-analysis\dist\tailwindcss-analysis.cjs.development.js:43:9)
at E:\***\node_modules\tailwindcss-analysis\dist\tailwindcss-analysis.cjs.development.js:50:7 {
errno: -4058,
code: 'ENOENT',
syscall: 'spawnSync npx',
path: 'npx',
spawnargs: [ 'tailwindcss@2.2.4', '--minify', '-o', 'tailwind-output.css' ],
error: [Circular *1],
status: null,
signal: null,
output: null,
pid: 0,
stdout: null,
stderr: null
}
Hello,
I still have the error with tailwindcss 3.3.3 :
Ensure that files to purge are configured in your tailwind config file
tailwind.config.js
const { fontFamily } = require("tailwindcss/defaultTheme")
const plugin = require('tailwindcss/plugin')
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./ui/**/*.{ts,tsx}",
],
theme: {
container: {
center: true,
padding: "1.5rem",
screens: {
"2xl": "1440px",
},
},
extend: {
flex: {
'initial-100': '0 0 100%'
},
fontFamily: {
sans: ["var(--font-inter)", ...fontFamily.sans],
},
colors: {
surface: {
100: "rgb(var(--surface-1) / <alpha-value>)",
200: "rgb(var(--surface-2) / <alpha-value>)",
300: "rgb(var(--surface-3) / <alpha-value>)",
400: "rgb(var(--surface-4) / <alpha-value>)",
500: "rgb(var(--surface-5) / <alpha-value>)",
600: "rgb(var(--surface-6) / <alpha-value>)"
},
accent: {
100: "rgb(var(--accent-1) / <alpha-value>)",
200: "rgb(var(--accent-2) / <alpha-value>)",
300: "rgb(var(--accent-3) / <alpha-value>)",
400: "rgb(var(--accent-4) / <alpha-value>)",
500: "rgb(var(--accent-5) / <alpha-value>)",
600: "rgb(var(--accent-6) / <alpha-value>)",
700: "rgb(var(--accent-7) / <alpha-value>)",
800: "rgb(var(--accent-8) / <alpha-value>)"
},
primary: "rgb(var(--primary) / <alpha-value>)",
secondary: "rgb(var(--secondary) / <alpha-value>)"
},
typography: {
DEFAULT: {
css: {
'blockquote p:first-of-type::before': { content: 'none' },
'blockquote p:first-of-type::after': { content: 'none' },
'blockquote': { borderLeftColor: "rgb(var(--secondary))", color: "inherit", fontStyle: "normal", marginLeft: "2rem" },
'blockquote strong': { color: "var(--tw-prose-bold)" }
}
}
},
boxShadow: {
'outline-normal': '0 0 0 2px var(--accent-2)',
'outline-red': '0 0 0 2px var(--red)',
'bottom': '0px 15px 10px -15px rgba(0, 0, 0, 0.2)',
magical:
'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.2) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
},
keyframes: {
slideUp: {
'0%': { height: 0 },
'100%': { height: 'var(--radix-accordion-content-height)' }
},
slideDown: {
'0%': { height: 'var(--radix-accordion-content-height)' },
'100%': { height: 0 }
}
},
animation: {
slideUp: 'slideUp 300ms ease-in-out',
slideDown: 'slideDown 300ms ease-in-out'
}
},
},
plugins: [
require("@tailwindcss/typography"),
plugin(function({ matchUtilities, theme }) {
matchUtilities(
{
'grid-cols-fit': (value) => ({
gridTemplateColumns: `repeat(auto-fit, minmax(${value}, 1fr))`
}),
'grid-cols-fill': (value) => ({
gridTemplateColumns: `repeat(auto-fill, minmax(${value}, 1fr))`
}),
},
{ values: theme('gridTemplateColumns') }
)
})
],
}package.json
{
"name": "xxxxxxx",
"version": "0.0.2",
"private": true,
"scripts": {
"dev": "next dev",
"dev-web": "next dev -p 80",
"build": "next build",
"start": "next start",
"lint": "next lint",
"codegen": "graphql-codegen --config codegen.ts",
"type-check": "tsc -noEmit -incremental"
},
"dependencies": {
"@ducanh2912/next-pwa": "^7.3.1",
"@googlemaps/js-api-loader": "^1.15.1",
"@headlessui/react": "^1.7.7",
"@hookform/resolvers": "^2.9.10",
"@mdx-js/loader": "^2.2.1",
"@mdx-js/react": "^2.2.1",
"@next/mdx": "^13.0.7",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-alert-dialog": "^1.0.2",
"@radix-ui/react-avatar": "^1.0.1",
"@radix-ui/react-dropdown-menu": "^2.0.1",
"@sendgrid/mail": "^7.7.0",
"@types/node": "^20.6.3",
"@types/react": "^18.2.22",
"@types/react-dom": "^18.2.7",
"@vercel/analytics": "^0.1.11",
"@vercel/og": "^0.0.21",
"bcrypt": "^5.1.0",
"clsx": "^1.2.1",
"embla-carousel-react": "^7.0.5",
"eslint": "8.30.0",
"eslint-config-next": "13.0.7",
"graphql": "^16.6.0",
"graphql-request": "^5.1.0",
"jsonwebtoken": "^9.0.0",
"lucide-react": "^0.277.0",
"micro": "^10.0.1",
"next": "^13.5.1",
"next-auth": "^4.23.1",
"next-pwa": "^5.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.41.0",
"react-hot-toast": "^2.4.0",
"react-remark": "^2.1.0",
"react-textarea-autosize": "^8.5.3",
"schema-dts": "^1.1.2",
"sharp": "^0.31.3",
"stripe": "^11.6.0",
"swr": "^2.0.0",
"tailwind-merge": "^1.8.0",
"typescript": "^5.0.4",
"zod": "^3.20.2"
},
"devDependencies": {
"@graphql-codegen/cli": "^2.16.1",
"@graphql-codegen/client-preset": "^1.2.3",
"@graphql-codegen/typescript": "^2.8.5",
"@graphql-codegen/typescript-graphql-request": "^4.5.8",
"@graphql-codegen/typescript-operations": "^2.5.10",
"@tailwindcss/typography": "^0.5.8",
"@types/bcrypt": "^5.0.0",
"@types/google.maps": "^3.51.0",
"@types/jsonwebtoken": "^9.0.3",
"autoprefixer": "^10.4.13",
"encoding": "^0.1.13",
"postcss": "^8.4.20",
"tailwindcss": "^3.3.3"
}
}Now I have this output :
$ npx tailwindcss-analysis
Need to install the following packages:
tailwindcss-analysis@0.3.1
Ok to proceed? (y) y
node:internal/errors:484
ErrorCaptureStackTrace(err);
^
<ref *1> Error: spawnSync npx ENOENT
at Object.spawnSync (node:internal/child_process:1110:20)
at spawnSync (node:child_process:857:24)
at execFileSync (node:child_process:900:15)
at C:\Users\Benjamin\AppData\Local\npm-cache\_npx\c3e98fee8af6b831\node_modules\tailwindcss-analysis\dist\index.js:1:8237
at Object.<anonymous> (C:\Users\Benjamin\AppData\Local\npm-cache\_npx\c3e98fee8af6b831\node_modules\tailwindcss-analysis\dist\index.js:1:10235)
at Module._compile (node:internal/modules/cjs/loader:1159:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
at Module.load (node:internal/modules/cjs/loader:1037:32)
at Module._load (node:internal/modules/cjs/loader:878:12)
at Module.require (node:internal/modules/cjs/loader:1061:19) {
errno: -4058,
code: 'ENOENT',
syscall: 'spawnSync npx',
path: 'npx',
spawnargs: [ 'tailwindcss', '--minify', '-o', 'tailwind-output.css' ],
error: [Circular *1],
status: null,
signal: null,
output: null,
pid: 0,
stdout: null,
stderr: null
}
Node.js v18.12.1
It seems to come from that line of code in index.ts :
execFileSync(
'npx',
['tailwindcss', '--minify', '-o', 'tailwind-output.css'],
{
env: { ...process.env, NODE_ENV: 'production' },
stdio: 'ignore',
}
);
When I manually call that function : npx tailwindcss --minify -o tailwind-output.css the output file is created
@bfourgeaud Are you using a windows machine ?
Please re-try with tailwindcss-analysis@0.3.2
@bfourgeaud Are you using a windows machine ?
Please re-try with
tailwindcss-analysis@0.3.2
It worked using tailwindcss-analysis@0.3.2 !!
And yes, I am using a windows machine
Thanks for the help with debugging the issue @bfourgeaud 🙌