`theme(width.1/3)` 的 Tailwind 3 宽度计算问题

Question

我正在尝试使用以下代码：

@apply w-[calc(theme(width.1/3)_-_1rem)] 根据文档，应该有效。但是每次我尝试编译代码时，都会出现以下错误：

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'

让我感到困惑的是，我正在使用 1/3 键作为错误状态，但它似乎被解析为 1 / 3，我认为这是我的问题？我将 Tailwind 3 与 Roots Sage 9.0.10 一起使用。

如果需要，这是我的 package.json

{
  "name": "sage",
  "version": "9.0.10",
  "author": "Roots <team@roots.io>",
  "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": {}
  }
}

Answer 1

Tailwind 似乎无法即时从配置文件中获取值（在 JIT 模式下方括号内）。我在

这样的配置文件中看到了注册自定义宽度 class 的选项

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      width: {
        'custom': "calc( theme('width[1/3]') - 1rem)", // it is important to pass it as a string
      }
    },
  },
}

并像

一样使用它

.selector {
  @apply w-custom;
} 

DEMO