2017-04-22 12:51:51 +00:00
[![Deploy to now ](https://deploy.now.sh/static/button.svg )](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/basic-css)
2016-12-22 05:10:54 +00:00
# Basic CSS example
## How to use
2017-12-03 04:30:17 +00:00
### Using `create-next-app`
2018-04-03 12:19:05 +00:00
Execute [`create-next-app` ](https://github.com/segmentio/create-next-app ) with [Yarn ](https://yarnpkg.com/lang/en/docs/cli/create/ ) or [npx ](https://github.com/zkat/npx#readme ) to bootstrap the example:
2017-12-03 04:30:17 +00:00
2018-03-14 08:09:46 +00:00
```bash
npx create-next-app --example basic-css basic-css-app
# or
yarn create next-app --example basic-css basic-css-app
2017-12-03 04:30:17 +00:00
```
### Download manually
2017-01-16 21:23:24 +00:00
Download the example [or clone the repo ](https://github.com/zeit/next.js ):
2016-12-22 05:10:54 +00:00
```bash
2017-12-07 02:12:42 +00:00
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/basic-css
2016-12-22 09:07:54 +00:00
cd basic-css
2016-12-22 05:10:54 +00:00
```
2016-12-22 23:05:49 +00:00
Install it and run:
2016-12-22 05:10:54 +00:00
```bash
npm install
2016-12-22 23:05:49 +00:00
npm run dev
2018-04-03 12:19:05 +00:00
# or
yarn
yarn dev
2016-12-22 05:10:54 +00:00
```
2016-12-22 23:05:49 +00:00
Deploy it to the cloud with [now ](https://zeit.co/now ) ([download](https://zeit.co/download))
2016-12-22 05:10:54 +00:00
```bash
2016-12-22 23:05:49 +00:00
now
2016-12-22 05:10:54 +00:00
```
## The idea behind the example
Next.js ships with [styled-jsx ](https://github.com/zeit/styled-jsx ) allowing you
to write scope styled components with full css support. This is important for
the modularity and code size of your bundles and also for the learning curve of the framework. If you know css you can write styled-jsx right away.