Where is the Code located that converts strings to css code?

[Chetan11-dev]

For example given a string "w-2" it should return ".w-2 {width: 0.5rem;}"
For example given a string "h-2" it should return ".h-2 {height: 0.5rem;}"

[adamwathan]

Hey! All of Tailwind's core plugins are in this file — here's an example plugin for classes like fill-black:

https://github.com/tailwindlabs/tailwindcss/blob/master/src/corePlugins.js#L1470-L1479

They use the same public plugin APIs that third-party plugins use, documented here:

https://tailwindcss.com/docs/plugins#dynamic-utilities

We have some internal helpers like createUtilityPlugin that map to matchUtilities calls under the hood with a more terse syntax to abstract away really common patterns, which is what powers the width and height plugins:

https://github.com/tailwindlabs/tailwindcss/blob/master/src/corePlugins.js#L499-L505

But again that's just a function that calls matchUtilities internally 👍🏻

https://github.com/tailwindlabs/tailwindcss/blob/master/src/util/createUtilityPlugin.js

[Chetan11-dev]

Actually, I am asking about with regards to JIT.

Here is my assumption of how tailwindcss works:
tailwindcss scans my HTML files and extracts all the classes. Then for each of these classes, it generates the corresponding CSS and injects into document.

For example:
I have the following html

<div class="w-2"></div>

Tailwind extracts the classes which are "w-2" and generates the CSS which is ".w-2 {width: 0.5rem;}" and the CSS is injected into document.

Assuming my assumptions are correct my question is:
Where is the code that converts the classes("w-2") into CSS(".w-2 {width: 0.5rem;}").

[Chetan11-dev]

@adamwathan

[adamwathan]

Answer I already gave is what you’re looking for. There’s nothing that is as simple/direct as if class is ‘w-2’ then generate this CSS, it all happens through the plugin system. Deep in the core somewhere Tailwind finds classes in your templates, splits them on dashes to get the parts w and 2 then iterates through all of the registered plugins to find one that handles that prefix and value, then delegates to that plugin to generate the actual CSS.

What you’re looking for is pretty much the whole codebase I’m afraid 😅

[Chetan11-dev]

Thanks, Adam :)