I'm trying to use the following code:
@apply w-[calc(theme(width.1/3)_-_1rem)] which according to the docs, should work. But every time I try and compile the code I get the following error:
Syntax Error: SyntaxError
<css input> 'width.1 / 3' does not exist in your theme config. 'width' has the following valid keys: '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '14', '16', '20', '24', '28', '32', '36', '40', '44', '48', '52', '56', '60', '64', '72', '80', '96', 'auto', 'px', '0.5', '1.5', '2.5', '3.5', '1/2', '1/3', '2/3', '1/4', '2/4', '3/4', '1/5', '2/5', '3/5', '4/5', '1/6', '2/6', '3/6', '4/6', '5/6', '1/12', '2/12', '3/12', '4/12', '5/12', '6/12', '7/12', '8/12', '9/12', '10/12', '11/12', 'full', 'screen', 'min', 'max', 'fit'
What I'm confused over is that I am using the 1/3 key as the error states, but it seems to be parsed as 1 / 3 which I assume is my problem? I'm using Tailwind 3 with Roots Sage 9.0.10.
Incase it's needed, here's my package.json
{
"name": "sage",
"version": "9.0.10",
"author": "Roots <[email protected]>",
"homepage": "https://roots.io/sage/",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/roots/sage.git"
},
"bugs": {
"url": "https://github.com/roots/sage/issues"
},
"licenses": [
{
"type": "MIT",
"url": "http://opensource.org/licenses/MIT"
}
],
"browserslist": [
"last 2 versions",
"android 4",
"opera 12"
],
"scripts": {
"build": "webpack --progress --config resources/assets/build/webpack.config.js",
"build:production": "webpack --env.production --progress --config resources/assets/build/webpack.config.js",
"build:profile": "webpack --progress --profile --json --config resources/assets/build/webpack.config.js",
"start": "webpack --hide-modules --watch --config resources/assets/build/webpack.config.js",
"rmdist": "rimraf dist",
"lint": "npm run -s lint:scripts && npm run -s lint:styles",
"lint:scripts": "eslint resources/assets/scripts resources/assets/build",
"lint:styles": "stylelint \"resources/assets/styles/**/*.{css,sass,scss,sss,less}\"",
"test": "npm run -s lint"
},
"engines": {
"node": ">= 8.0.0"
},
"devDependencies": {
"autoprefixer": "^10.4.0",
"browser-sync": "^2.26.13",
"browsersync-webpack-plugin": "^0.6.0",
"bs-html-injector": "~3.0",
"buble-loader": "^0.4.1",
"cache-loader": "~1.2.5",
"clean-webpack-plugin": "^0.1.18",
"copy-globs-webpack-plugin": "^0.2.0",
"css-loader": "^0.28.11",
"cssnano": "^4.0.5",
"eslint": "~4.19.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.14.0",
"extract-text-webpack-plugin": "~3.0.2",
"file-loader": "^1.1.6",
"friendly-errors-webpack-plugin": "^1.6.1",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-webpack-plugin": "^2.4.2",
"import-glob": "~1.5",
"node-sass": "^5.0.0",
"postcss": "^8.4.5",
"postcss-loader": "^4.0.4",
"postcss-safe-parser": "^5.0.2",
"resolve-url-loader": "~2.3.1",
"rimraf": "^3.0.2",
"sass-loader": "~6.0",
"style-loader": "^0.23.1",
"stylelint": "^13.7.2",
"stylelint-config-standard": "^20.0.0",
"stylelint-webpack-plugin": "^0.10.5",
"tailwindcss": "^3.0.7",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^0.6.2",
"webpack": "~3.10.0",
"webpack-assets-manifest": "^1.0.0",
"webpack-dev-middleware": "~2.0.4",
"webpack-hot-middleware": "^2.22.3",
"webpack-merge": "~4.1.4",
"yargs": "^16.1.0"
},
"dependencies": {
"@fancyapps/ui": "^4.0.0-beta.4",
"@fortawesome/fontawesome-free": "^5.15.4",
"aos": "^2.3.4",
"flickity": "^2.3.0",
"flickity-imagesloaded": "^2.0.0",
"jquery": "^3.3.1",
"lodash": "^4.17.21"
},
"stylelint": {
"rules": {}
}
}
It seems Tailwind cannot take a value from config file on the fly (within square brackets in a JIT mode). I see the option to register custom width class within configuration file like
// tailwind.config.js
module.exports = {
theme: {
extend: {
width: {
'custom': "calc( theme('width[1/3]') - 1rem)", // it is important to pass it as a string
}
},
},
}
and use it like
.selector {
@apply w-custom;
}