https://github.com/regenrek/vue-ts-css-in-js-dark-mode-example
vue dark mode switcher with typescript, emotion, twin.macro (TailwindCSS css-in-js) and composition api example
https://github.com/regenrek/vue-ts-css-in-js-dark-mode-example
Last synced: about 1 month ago
JSON representation
vue dark mode switcher with typescript, emotion, twin.macro (TailwindCSS css-in-js) and composition api example
- Host: GitHub
- URL: https://github.com/regenrek/vue-ts-css-in-js-dark-mode-example
- Owner: regenrek
- Created: 2020-06-30T10:43:14.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-13T04:47:04.000Z (over 2 years ago)
- Last Synced: 2025-02-08T12:46:22.539Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.18 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue + twin.macro
Vue + Twin CSS-in-js lib (TailwindCSS)
## Demo
Dark Mode Switcher included. Using composables as Theme Wrapper with provide/inject.
Demo Link: https://vuejs-ts-emotion-css-in-js.netlify.app
This is a WIP proof of concept to make use of different libraries. I don't recommend to use this anywhere in production.
## Using
* vue.js typescript
* [vuejs/composition-api](https://github.com/vuejs/composition-api) (see [rfc](https://composition-api.vuejs.org/))
* [twin.macro](https://github.com/ben-rogerson/twin.macro) Use [TailwindCSS](https://tailwindcss.com/) within css-in-js
* [@egoist/vue-emotion](https://github.com/regenrek/vue-emotion) emotion css-in-js
* [babel jsx](https://github.com/vuejs/jsx) vue.js jsx support
* [babel-preset-vca-jsx](https://github.com/luwanquan/babel-preset-vca-jsx) Automatically import `createElement as h` when writing `JSX`
* [vue-unstated](https://github.com/resessh/vue-unstated) Automatically import `createElement as h` when writing `JSX`
## How-To
Basically all you can do with [twin.macro](https://github.com/ben-rogerson/twin.macro). Please see current [Limitations](#Limitations)
```
## Note
* I've slightly adapted @egoist/vue-emotion: removed global theme injection so it works with vca local provide/inject.
## Limitations
twin.macro with TypeScript + emotion
❌
```js
import tw, {css, styled } from `twin.macro`
```
✅
```js
import tw from 'twin.macro'
import { css } from 'emotion'
import { styled } from '@egoist/vue-emotion'
```
Use emotions `css` prop with twin.macro `tw` prop
❌
```js
const style = tw`flex items-center justify-center bg-black min-h-screen`
// ↓ ↓ ↓ ↓ ↓ ↓
{
fontSize: '0.875rem',
'@media (min-width: 768px)': {
fontSize: '1.125rem',
},
}
```
✅
```js
const style = css`${tw`flex items-center justify-center bg-black min-h-screen`}`
```
Twin's `tw` prop on jsx elements
❌
```js
...
```
✅
```js
const style = css`${tw`flex bg-black`}`
...
```
## Project setup
Clone the project
```
git clone [email protected]:regenrek/vue-ts-twinmacro.git
```
Install and run
```
yarn
yarn serve
```
## Thanks to
This project is mostly inspired by the works of the following creators:
[@wonderful-panda](https://github.com/wonderful-panda)
[@antfu](https://github.com/antfu)
[@ben-rogerson](https://github.com/ben-rogerson)
[@luwanquan](https://github.com/luwanquan)
[@egoist](https://github.com/egoist)
[@u3u](https://github.com/u3u)
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
# vue-ts-twinmacro