From a3298a968bc34f986de65ce5f5d0e1483d2d37bd Mon Sep 17 00:00:00 2001 From: Swapnil M Mane Date: Thu, 23 Dec 2021 14:50:53 +0530 Subject: [PATCH] docs: updated some commands and improved a statement Some old commands were not working; replaced them with the new ones. Reference: for fixing package installation, took the reference from https://github.com/tailwindlabs/tailwindcss/issues/3432#issuecomment-770011986 --- .../integrations/integrate-tailwindcss.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/how-to-guides/integrations/integrate-tailwindcss.mdx b/docs/how-to-guides/integrations/integrate-tailwindcss.mdx index caef402c0..ada57a388 100644 --- a/docs/how-to-guides/integrations/integrate-tailwindcss.mdx +++ b/docs/how-to-guides/integrations/integrate-tailwindcss.mdx @@ -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. @@ -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 @@ -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. @@ -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= +yarn webiny deploy apps/website --env {environment} ``` Tailwind CSS is ready to use in your Webiny project.