Skip to content

Commit

Permalink
Merge pull request #368 from webiny/fix/tailwind-tutorial
Browse files Browse the repository at this point in the history
docs: updated some commands and improved a statement in Tailwind guide
  • Loading branch information
swapnilmmane authored Jan 12, 2022
2 parents 5af9d6d + a3298a9 commit 00a37a6
Showing 1 changed file with 5 additions and 5 deletions.
10 changes: 5 additions & 5 deletions docs/how-to-guides/integrations/integrate-tailwindcss.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ The code that we will cover in this guide can also be found in our GitHub [examp
Install `tailwindcss` package and its peer-dependencies using yarn, by running the following command from root of your project:

```
yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat^2.1.2 postcss@^7 autoprefixer@^9
yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat@^2.1.2 postcss@^7 autoprefixer@^9
```
:::info
Webiny currently uses [Webpack 4](https://v4.webpack.js.org/) which doesn't support PostCSS 8 yet. So, we'll need to install the [Tailwind CSS v2.0 PostCSS 7 compatibility](https://tailwindcss.com/docs/installation#post-css-7-compatibility-build) build for now as shown above.
Expand Down Expand Up @@ -163,7 +163,7 @@ Now that we have added Tailwind CSS to Webpack configuration, let's move on to t
Next, generate your `tailwind.config.js` file. From the root of your project run the following command:

```
tailwindcss init
npx tailwindcss init
```

:::note
Expand Down Expand Up @@ -191,7 +191,7 @@ module.exports = {
Learn more about configuring Tailwind in the [configuration documentation](https://tailwindcss.com/docs/configuration).
:::

Now that we have this global configuration, let's use it in the **Website** `(apps/website)` React application as shown below:
Now that we have this global configuration, let's use it in the **Website** `(apps/website)` React application by creating a `tailwind.config.js` file in `apps/website/code` directory as shown below:

```js title="apps/website/code/tailwind.config.js"
// Import config from the project root.
Expand All @@ -216,13 +216,13 @@ Tailwind CSS swaps these directives out at build-time with all of the styles it
That's all! Now, when you start your **Website** `(apps/website)` React application locally, by running:

```
yarn watch --env=local
yarn webiny watch apps/website --env dev
```

Or build it (which happens automatically for you when you deploy your application using `webiny deploy` command):

```
yarn build --env=<YOUR_ENV>
yarn webiny deploy apps/website --env {environment}
```
Tailwind CSS is ready to use in your Webiny project.

Expand Down

0 comments on commit 00a37a6

Please sign in to comment.