{"id":500860,"date":"2026-10-29T13:33:04","date_gmt":"2026-10-29T10:33:04","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=500860"},"modified":"2026-10-29T13:33:04","modified_gmt":"2026-10-29T10:33:04","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=500860","title":{"rendered":"\u0422\u0435\u043c\u0430 Tailwind CSS \u0438\u0437\u00a0\u0434\u0438\u0437\u0430\u0439\u043d\u2011\u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439"},"content":{"rendered":"
\n

\u042f \u0441\u0430\u043c \u0440\u0438\u0441\u0443\u044e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0438 \u0441\u0430\u043c \u0438\u0445 \u0432\u0435\u0440\u0441\u0442\u0430\u044e. \u0423\u00a0\u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 pbstyles: \u0446\u0432\u0435\u0442\u0430, \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438 \u0448\u0440\u0438\u0444\u0442\u044b \u0432\u00a0\u043d\u0435\u0439 \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0434\u0438\u0437\u0430\u0439\u043d\u2011\u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438. \u0422\u0435\u043c\u0443 \u0434\u043b\u044f\u00a0Tailwind \u044f \u0445\u043e\u0442\u0435\u043b \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0438\u0437\u00a0\u044d\u0442\u0438\u0445 \u0442\u043e\u043a\u0435\u043d\u043e\u0432, \u0430\u00a0\u043d\u0435\u00a0\u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0440\u0443\u043a\u0430\u043c\u0438 \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0439 \u043f\u0440\u0430\u0432\u043a\u0438 \u0432\u00a0Figma. \u0422\u0430\u043a \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043f\u0430\u043a\u0435\u0442 tailwind\u2011dictionary.<\/p>\n

\u041e\u043d \u0431\u0435\u0440\u0451\u0442 \u0442\u043e\u043a\u0435\u043d\u044b \u0432\u00a0JSON \u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0438\u0437\u00a0\u043d\u0438\u0445 \u0442\u0435\u043c\u0443 Tailwind CSS. \u0421\u0432\u0435\u0442\u043b\u0430\u044f \u0438 \u0442\u0451\u043c\u043d\u0430\u044f \u0442\u0435\u043c\u0430 \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0438\u0437\u00a0\u0442\u0435\u0445\u00a0\u0436\u0435 \u0444\u0430\u0439\u043b\u043e\u0432.<\/p>\n

\u041f\u0430\u043a\u0435\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u0443\u00a0\u0432\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0442\u043e\u043a\u0435\u043d\u044b, \u043d\u043e\u00a0\u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0430\u00a0Tailwind \u043d\u0435\u00a0\u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0438\u0437\u2011\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u00a0\u0442\u0435\u043c\u0443 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0432\u0435\u0441\u0442\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e. \u0418\u043b\u0438\u00a0\u0435\u0441\u043b\u0438 \u0432\u044b \u0443\u0436\u0435 \u043d\u0430\u00a0Tailwind \u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u0437\u00a0Figma \u0438 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0442\u0435\u043c\u0443.<\/p>\n\n

\u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435\u00a0\u043f\u043e\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0418\u0418<\/h3>\n

\u0418\u0418 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0431\u0440\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u0437\u00a0Figma \u0438 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0442\u0435\u043c\u0443. \u041d\u043e\u00a0\u0442\u043e\u043a\u0435\u043d\u044b \u0418\u0418 \u0441\u0442\u043e\u044f\u0442 \u0434\u0435\u043d\u0435\u0433, \u0430\u00a0\u0442\u0435\u043c\u0430 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0439 \u043f\u0440\u0430\u0432\u043a\u0438 \u0432\u00a0\u043c\u0430\u043a\u0435\u0442\u0435. \u0422\u0440\u0430\u0442\u0438\u0442\u044c \u0438\u0445 \u043d\u0430\u00a0\u043e\u0434\u043d\u0443 \u0438 \u0442\u0443\u00a0\u0436\u0435 \u0440\u0443\u0442\u0438\u043d\u0443 \u0436\u0430\u043b\u043a\u043e, \u043b\u0443\u0447\u0448\u0435 \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043d\u0430\u00a0\u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u043e\u0441\u043b\u043e\u0436\u043d\u0435\u0435. \u041a\u00a0\u0442\u043e\u043c\u0443\u00a0\u0436\u0435 \u0418\u0418 \u043c\u043e\u0436\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0442\u0435\u043c\u0443 \u0447\u0443\u0442\u044c \u043f\u043e\u2011\u0440\u0430\u0437\u043d\u043e\u043c\u0443.<\/p>\n

\u0421\u00a0\u043f\u0430\u043a\u0435\u0442\u043e\u043c \u0441\u0431\u043e\u0440\u043a\u0443 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0448\u044c \u043e\u0434\u0438\u043d \u0440\u0430\u0437. \u0414\u0430\u043b\u044c\u0448\u0435 \u044d\u0442\u043e \u043e\u0434\u043d\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430, \u0438 \u043f\u0440\u0438\u00a0\u0442\u0435\u0445\u00a0\u0436\u0435 \u0442\u043e\u043a\u0435\u043d\u0430\u0445 \u0442\u0435\u043c\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0439.<\/p>\n

\u0427\u0442\u043e\u00a0\u0443\u043c\u0435\u0435\u0442<\/h3>\n

\u041f\u0430\u043a\u0435\u0442 \u0447\u0438\u0442\u0430\u0435\u0442 \u0442\u043e\u043a\u0435\u043d\u044b \u0432\u00a0\u043d\u043e\u0432\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435 W3C Design Tokens (DTCG 2025.10) \u0438 \u0432\u00a0\u0441\u0442\u0430\u0440\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435 Style Dictionary. \u041f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u00a0Figma, Tokens Studio \u0438 Terrazzo.<\/p>\n

\u0421\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0442\u0435\u043c\u0443 \u0434\u043b\u044f\u00a0Tailwind 4\u00a0\u0438 \u0434\u043b\u044f\u00a0Tailwind 3. \u0422\u0435\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0433\u043e\u0434\u043d\u043e: \u0441\u0432\u0435\u0442\u043b\u0430\u044f, \u0442\u0451\u043c\u043d\u0430\u044f, \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u0430\u044f, \u0442\u0435\u043c\u0430 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0440\u0435\u043d\u0434\u0430. \u0412\u00a0\u0442\u0435\u043c\u0443 \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0446\u0432\u0435\u0442\u0430, \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u0448\u0440\u0438\u0444\u0442\u044b, \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u0442\u0435\u043d\u0438, \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u044b \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n

\u0412\u0441\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u00a0\u2014 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b config.json<\/code>. \u0420\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u043f\u043e\u043b\u044f \u0438 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0438. \u0415\u0441\u0442\u044c \u0440\u0435\u0436\u0438\u043c --watch<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0442\u0435\u043c\u0443 \u043f\u0440\u0438\u00a0\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0442\u043e\u043a\u0435\u043d\u043e\u0432.<\/p>\n

\u0427\u0442\u043e\u00a0\u043e\u0442\u0434\u0430\u0451\u0442 Figma<\/h3>\n

Figma \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441\u0430\u043c\u0430: \u0432\u00a0\u043e\u043a\u043d\u0435 Variables \u043f\u0440\u0430\u0432\u044b\u0439 \u043a\u043b\u0438\u043a \u043f\u043e\u00a0\u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u2192 Export modes<\/strong>. \u041d\u0430\u00a0\u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0444\u0430\u0439\u043b *.tokens.json<\/code>.<\/p>\n

\u0412\u043e\u0437\u044c\u043c\u0451\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440. \u041f\u0430\u043b\u0438\u0442\u0440\u0430 \u0438 \u0440\u0430\u0434\u0438\u0443\u0441\u044b \u043b\u0435\u0436\u0430\u0442 \u0432\u00a0\u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0431\u0435\u0437\u00a0\u0440\u0435\u0436\u0438\u043c\u043e\u0432. \u0426\u0432\u0435\u0442\u0430 primary<\/code>, background<\/code> \u0438 foreground<\/code> \u043b\u0435\u0436\u0430\u0442 \u0432\u00a0\u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0441\u00a0\u0440\u0435\u0436\u0438\u043c\u0430\u043c\u0438 Light \u0438 Dark \u0438 \u0441\u0441\u044b\u043b\u0430\u044e\u0442\u0441\u044f \u043d\u0430\u00a0\u043f\u0430\u043b\u0438\u0442\u0440\u0443.<\/p>\n

\u0422\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0430\u043b\u0438\u0442\u0440\u0430:<\/p>\n

{  \"color\": {    \"blue\": {      \"600\": {        \"$type\": \"color\",        \"$value\": {          \"colorSpace\": \"srgb\",          \"components\": [0.149, 0.388, 0.922],          \"alpha\": 1,          \"hex\": \"#2563EB\"        },        \"$extensions\": { \"com.figma.variableId\": \"VariableID:1:3\" }      }    }  },  \"radius\": {    \"4\": { \"$type\": \"number\", \"$value\": 4 }  }}<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0410\u00a0\u0442\u0430\u043a \u0440\u0435\u0436\u0438\u043c Light:<\/p>\n
{  \"color\": {    \"primary\": {      \"$type\": \"color\",      \"$value\": \"{color.blue.600}\"    }  }}<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0412\u00a0CSS \u044d\u0442\u043e \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043d\u0435\u00a0\u0432\u0441\u0442\u0430\u0432\u0438\u0448\u044c. \u0426\u0432\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u0430\u043d \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c, primary<\/code> \u0441\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u00a0\u0434\u0440\u0443\u0433\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u0430\u00a0\u0443\u00a0\u0440\u0430\u0434\u0438\u0443\u0441\u0430 \u043d\u0435\u0442 \u0435\u0434\u0438\u043d\u0438\u0446\u044b: --radius-4: 4<\/code> \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435\u00a0\u043f\u043e\u0439\u043c\u0451\u0442. \u041f\u0430\u043a\u0435\u0442 \u0432\u0441\u0451 \u044d\u0442\u043e \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u0442 \u0441\u0430\u043c.<\/p>\n
\u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0442\u0435\u043c\u0443<\/h3>\n
npm install --save-dev tailwind-dictionary<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041f\u0430\u043b\u0438\u0442\u0440\u0443 \u043a\u043b\u0430\u0434\u0451\u043c \u0432\u00a0tokens\/Primitives.tokens.json, \u0440\u0435\u0436\u0438\u043c\u044b\u00a0\u2014 \u0432\u00a0tokens\/Light.tokens.json \u0438 tokens\/Dark.tokens.json. \u0420\u044f\u0434\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u0451\u043c config.json<\/code>:<\/p>\n
{  \"version\": 4,  \"source\": [\"tokens\/Primitives.tokens.json\"],  \"themes\": {    \"light\": [\"tokens\/Light.tokens.json\"],    \"dark\": [\"tokens\/Dark.tokens.json\"]  },  \"output\": \".\/styles\",  \"themeAliases\": {    \"color\": \"color\",    \"radius\": \"radius\",    \"spacing\": \"1px\"  }}<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0412 source<\/code> \u043b\u0435\u0436\u0430\u0442 \u0442\u043e\u043a\u0435\u043d\u044b, \u043e\u0431\u0449\u0438\u0435 \u0434\u043b\u044f\u00a0\u0432\u0441\u0435\u0445 \u0442\u0435\u043c, \u0432 themes<\/code>\u00a0\u2014 \u0444\u0430\u0439\u043b\u044b \u0442\u0435\u043c. \u0412 themeAliases<\/code> \u0441\u043b\u0435\u0432\u0430 \u043a\u043b\u044e\u0447 \u0442\u0435\u043c\u044b Tailwind, \u0441\u043f\u0440\u0430\u0432\u0430 \u0433\u0440\u0443\u043f\u043f\u0430 \u0442\u043e\u043a\u0435\u043d\u043e\u0432. \u0415\u0441\u043b\u0438 \u0432\u00a0Figma \u0440\u0430\u0434\u0438\u0443\u0441\u044b \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f rounded<\/code>, \u043f\u0438\u0448\u0435\u043c \"radius\": \"rounded\"<\/code>. \u0421\u0442\u0440\u043e\u043a\u0430 \"spacing\": \"1px\"<\/code> \u0437\u0430\u0434\u0430\u0451\u0442 \u0448\u0430\u0433 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432: \u043a\u043b\u0430\u0441\u0441 p-16<\/code> \u0434\u0430\u0441\u0442 \u0440\u043e\u0432\u043d\u043e 16\u00a0\u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u043a\u0430\u043a\u00a0\u0432\u00a0\u043c\u0430\u043a\u0435\u0442\u0435.<\/p>\n
\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u0431\u043e\u0440\u043a\u0443 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u043e\u0441\u043b\u0435 Tailwind:<\/p>\n
npx tailwind-dictionary<\/code>
<\/span><\/a><\/div><\/pre>\n
@import 'tailwindcss';@import '.\/styles\/tailwind\/theme.css';<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u00a0\u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043a\u043b\u0430\u0441\u0441\u044b bg-primary<\/code>, text-foreground<\/code> \u0438 rounded-4<\/code>.<\/p>\n
\u0427\u0442\u043e\u00a0\u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c<\/h3>\n
\u0424\u0430\u0439\u043b theme.css<\/code>, \u0441\u0432\u0435\u0442\u043b\u0430\u044f \u0442\u0435\u043c\u0430 \u0434\u043b\u044f\u00a0\u043a\u0440\u0430\u0442\u043a\u043e\u0441\u0442\u0438 \u0443\u0431\u0440\u0430\u043d\u0430:<\/p>\n
:root {  --theme-color-primary: #2563eb;  --theme-color-background: #f9fafb;  --theme-color-foreground: #111827;}[data-theme='dark'] {  --theme-color-primary: #3380f5;  --theme-color-background: #111827;  --theme-color-foreground: #f9fafb;}@theme {  --*: initial;  --color-*: initial;  --color-blue-400: #3380f5;  --color-blue-600: #2563eb;  --color-gray-50: #f9fafb;  --color-gray-900: #111827;  --radius-0: 0;  --radius-4: 4px;  --radius-8: 8px;  --spacing: 1px;}@theme inline {  --color-primary: var(--theme-color-primary);  --color-background: var(--theme-color-background);  --color-foreground: var(--theme-color-foreground);}<\/code>
<\/span><\/a><\/div><\/pre>\n
\u0426\u0432\u0435\u0442\u0430 \u0441\u0442\u0430\u043b\u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u043c\u0438 hex, \u0441\u0441\u044b\u043b\u043a\u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438. \u0420\u0430\u0434\u0438\u0443\u0441 4<\/code> \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u043b\u0441\u044f \u0432 4px<\/code>. \u0415\u0434\u0438\u043d\u0438\u0446\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u043e\u043f\u0446\u0438\u0435\u0439 numberUnit<\/code>: \"rem\"<\/code> \u0434\u0435\u043b\u0438\u0442 \u0447\u0438\u0441\u043b\u043e \u043d\u0430 16, false<\/code> \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u0430\u043a\u00a0\u0435\u0441\u0442\u044c.<\/p>\n
\u0421\u0442\u0440\u043e\u043a\u0430 --*: initial<\/code> \u0443\u0431\u0438\u0440\u0430\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u0442\u0435\u043c\u0443 Tailwind. \u0412\u00a0\u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0448\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0438 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0439 bg-blue-500<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435\u0442 \u0432\u00a0\u043c\u0430\u043a\u0435\u0442\u0435, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u00a0\u0441\u043e\u0431\u0435\u0440\u0451\u0442\u0441\u044f.<\/p>\n
\u041a\u0430\u043a\u00a0\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u0442\u0435\u043c\u044b<\/h3>\n
\u0426\u0432\u0435\u0442\u0430 \u0442\u0435\u043c \u043b\u0435\u0436\u0430\u0442 \u0432 --theme-color-*<\/code>, \u0430\u00a0Tailwind \u0441\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u00a0\u043d\u0438\u0445 \u0447\u0435\u0440\u0435\u0437 @theme inline<\/code>. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f inline<\/code> \u043a\u043b\u0430\u0441\u0441 bg-primary<\/code> \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 background-color: var(--theme-color-primary)<\/code>, \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044f \u043d\u0430\u00a0\u0442\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435, \u0433\u0434\u0435 \u0441\u0442\u043e\u0438\u0442 \u043a\u043b\u0430\u0441\u0441. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0435\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0432\u00a0\u043b\u044e\u0431\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n
<html data-theme=\"dark\">  <body>    <section data-theme=\"light\">\u0421\u0432\u0435\u0442\u043b\u044b\u0439 \u0431\u043b\u043e\u043a \u043d\u0430 \u0442\u0451\u043c\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/section>  <\/body><\/html><\/code>
<\/span><\/a><\/div><\/pre>\n
\u0411\u0435\u0437\u00a0\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u0441\u0432\u0435\u0442\u043b\u0430\u044f \u0438 \u0442\u0451\u043c\u043d\u0430\u044f \u0442\u0435\u043c\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c \u0441\u0438\u0441\u0442\u0435\u043c\u044b. \u0410\u0442\u0440\u0438\u0431\u0443\u0442 \u043d\u0430 <html><\/code> \u0438\u0445 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u0435\u0442, \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f\u00a0\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044f \u0442\u0435\u043c\u044b \u043d\u0430\u00a0\u0441\u0430\u0439\u0442\u0435.<\/p>\n
\u041d\u0430\u00a0\u0447\u0442\u043e \u044f \u043d\u0430\u0442\u044b\u043a\u0430\u043b\u0441\u044f<\/h3>\n
\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 Figma \u043d\u0435\u00a0\u0432\u044b\u0433\u0440\u0443\u0436\u0430\u0435\u0442. \u0422\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u0442\u0435\u043d\u0435\u0439 \u0432\u00a0\u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0435 \u0442\u043e\u0436\u0435 \u043d\u0435\u0442: \u0432\u00a0Figma \u044d\u0442\u043e \u0441\u0442\u0438\u043b\u0438, \u0430\u00a0\u043d\u0435\u00a0\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u042f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u0438\u0445 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e, \u0438 \u0442\u043e\u043a\u0435\u043d \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0438 h64<\/code> \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432\u00a0\u043a\u043b\u0430\u0441\u0441 text-h64<\/code> \u0441\u0440\u0430\u0437\u0443 \u0441\u00a0\u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c, \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u043e\u043c \u0438 \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u0435\u043c.<\/p>\n
\u0424\u0430\u0439\u043b\u044b \u0442\u0435\u043c \u043d\u0435\u043b\u044c\u0437\u044f \u043a\u043b\u0430\u0441\u0442\u044c \u0432 source<\/code>. \u0415\u0441\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c tokens\/**\/*.json<\/code>, \u0430\u00a0\u0442\u0435\u043c\u044b \u043b\u0435\u0436\u0430\u0442 \u0432 tokens\/themes\/<\/code>, \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435\u00a0\u0436\u0435 \u0442\u043e\u043a\u0435\u043d\u044b \u043f\u0440\u0438\u0434\u0443\u0442 \u0434\u0432\u0430\u0436\u0434\u044b.<\/p>\n
\u0421\u0442\u0430\u0440\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 Style Dictionary \u043f\u0430\u043a\u0435\u0442 \u0442\u043e\u0436\u0435 \u0447\u0438\u0442\u0430\u0435\u0442, \u043d\u043e\u00a0\u0441\u043c\u0435\u0448\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u00a0\u043d\u043e\u0432\u044b\u043c \u0432\u00a0\u043e\u0434\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0435 \u043d\u0435\u043b\u044c\u0437\u044f.<\/p>\n
\u0415\u0441\u043b\u0438 \u0447\u0442\u043e\u2011\u0442\u043e \u043d\u0435\u00a0\u0442\u0430\u043a, \u043e\u0448\u0438\u0431\u043a\u0430 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439\u00a0\u2014 \u0441\u00a0\u0438\u043c\u0435\u043d\u0435\u043c \u0442\u043e\u043a\u0435\u043d\u0430 \u0438 \u0444\u0430\u0439\u043b\u0430:<\/p>\n
\u2718 Token \"color.text\" (tokens\/color.json) references {color.nope}, which is not defined<\/code>
<\/span><\/a><\/div><\/pre>\n
\u041f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0431\u0435\u0437\u00a0\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438<\/h3>\n
\u0412 \u043f\u043b\u0435\u0439\u0433\u0440\u0430\u0443\u043d\u0434\u0435<\/a> \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u044e \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u0437\u00a0Figma \u0438 \u0441\u0440\u0430\u0437\u0443 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u0443\u044e \u0442\u0435\u043c\u0443 \u0438 \u043f\u0440\u0435\u0432\u044c\u044e \u0432\u00a0\u0441\u0432\u0435\u0442\u043b\u043e\u0439 \u0438 \u0442\u0451\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u0435. \u0412\u0441\u0451 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u00a0\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0442\u043e\u043a\u0435\u043d\u044b \u043d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435\u00a0\u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f.<\/p>\n
\u0421\u00a0Figma \u043f\u0430\u043a\u0435\u0442 \u0441\u0430\u043c \u043d\u0435\u00a0\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f: \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0443\u043a\u0430\u043c\u0438 \u0438 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0432\u00a0\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043e\u043d \u0442\u043e\u0436\u0435 \u043d\u0435\u00a0\u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442, \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043c\u0443. \u0415\u0441\u043b\u0438 Tailwind \u0432\u00a0\u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0435\u0442, \u0438\u0437\u00a0\u0442\u0435\u0445\u00a0\u0436\u0435 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c CSS\u2011\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u043c\u0438\u043a\u0441\u0438\u043d\u044b \u0434\u043b\u044f\u00a0LESS \u0438 SCSS \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u043c \u043f\u0430\u043a\u0435\u0442\u043e\u043c mixin\u2011dictionary<\/a>.<\/p>\n
\u0421\u0441\u044b\u043b\u043a\u0438<\/h3>\n