Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wowlusitong/babel-plugin-tailwind-dark
A Babel plugin to add custom dark tailwind class when compiling your code using Babel.
https://github.com/wowlusitong/babel-plugin-tailwind-dark
babel-plugin dark-theme react tailwindcss
Last synced: 13 days ago
JSON representation
A Babel plugin to add custom dark tailwind class when compiling your code using Babel.
- Host: GitHub
- URL: https://github.com/wowlusitong/babel-plugin-tailwind-dark
- Owner: wowlusitong
- License: mit
- Created: 2020-12-29T14:08:39.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-01-01T12:40:14.000Z (almost 4 years ago)
- Last Synced: 2024-10-13T01:08:34.501Z (about 1 month ago)
- Topics: babel-plugin, dark-theme, react, tailwindcss
- Language: JavaScript
- Homepage: https://tailwind-dark.vercel.app
- Size: 56.6 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-tailwind-dark
A Babel plugin to add custom dark class when compiling your code using Babel.
### Usage
Install the plugin first:
```sh
npm install babel-plugin-tailwind-dark --save-dev
```
Add plugin in your .babelrc with the custom dark option:
```json
{
"plugins": [
["tailwind-dark", {
"dark": {
"bg-white": "bg-gray-800",
"text-gray-900": "text-white"
}
}]
]
}
```
[Enable dark mode in tailwind](https://tailwindcss.com/docs/dark-mode)
### Example
[Example repo](https://github.com/wowlusitong/babel-plugin-tailwind-dark-example)
Transforms
```js
Dark mode is here!
```
to
```js
Dark mode is here!
```
### Production
If purge is enabled, you need add dark classnames to the [safelist](https://purgecss.com/safelisting.html#specific-selectors)
```js
// tailwind.config.js
module.exports = {
purge: {
content: ['./src/**/*.{js,ts,jsx,tsx}'],
options: {
safelist: ['dark:bg-gray-800', 'dark:text-white'],
}
},
}
```
### Requirements
- [tailwind 2](https://tailwindcss.com/docs/dark-mode)
- [React](https://reactjs.org/)