@prefix directive #1781
jameslkingsley
started this conversation in
Ideas
Replies: 2 comments
-
Is this the same as the current way to create a prefix? https://tailwindcss.com/docs/configuration/#prefix // tailwind.config.js
module.exports = {
prefix: 'tw-',
} That generates utilities like: .tw-text-left {
text-align: left;
}
.tw-text-center {
text-align: center;
}
.tw-text-right {
text-align: right;
}
/* etc. */ And it's used with: <div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500">
<!-- -->
</div> |
Beta Was this translation helpful? Give feedback.
0 replies
-
Not exactly - that prefix option only works for Tailwind's classes, but it doesn't work with any classes you define manually, like a custom component or one-off solution kind of thing. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
It would be awesome if there was a
@prefix
directive similar to how@responsive
or@screen
works. What it would do is prefix all classes inside it with the configured Tailwind prefix. This then means the prefix can be kept and maintained in one place and turned on and off based on dev/production build.Input:
Output:
It should also interpret variants, eg:
Input:
Output:
Beta Was this translation helpful? Give feedback.
All reactions