Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: updated some commands and improved a statement in Tailwind guide #368

Merged
merged 1 commit into from
Jan 12, 2022
Merged

docs: updated some commands and improved a statement in Tailwind guide #368

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions docs/how-to-guides/integrations/integrate-tailwindcss.mdx
View file
Open in desktop
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