https://github.com/casaub0n/oshinagaki

oshinagaki
https://github.com/casaub0n/oshinagaki

Last synced: 7 days ago
JSON representation

oshinagaki

• Host: GitHub
• URL: https://github.com/casaub0n/oshinagaki
• Owner: casaub0n
• Created: 2020-09-23T03:41:49.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T14:44:38.000Z (about 2 years ago)
• Last Synced: 2024-11-28T04:26:42.817Z (2 months ago)
• Language: CSS
• Homepage: https://oshinagaki.vercel.app/
• Size: 1.54 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 28
• Metadata Files:
  • Readme: README.md
  • Security: SECURITY.md

Awesome Lists containing this project

README

        
# Oshinagaki

[oshinagaki](https://oshinagaki.vercel.app/) is to create vertical writing

## Deploy your own

Deploy the example using [Vercel](https://vercel.com):

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss-emotion)

## How to use

Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:

```bash

npx create-next-app --example with-tailwindcss-emotion with-tailwindcss-emotion-app

# or

yarn create next-app --example with-tailwindcss-emotion with-tailwindcss-emotion-app

```

Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

## Notes

The CSS classes generated by Emotion will include the tailwind styles but not the name of the classes. For example the following component:

```jsx

const Header = styled.div`

  ${tw`font-mono text-sm text-gray-800`}

`

```

Will be transformed into:

```css

.css-25og8s-Header {

  font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',

    monospace;

  font-size: 0.875rem;

  color: #2d3748;

}

```

### tailwind CSS config

Use the following command when you add a tailwind plugin that adds to tailwind's base css:

```bash

npm run build:base-css

# or

yarn run build:base-css

```