From 4ccd8dd310dca1343572205db5516ad232bcc888 Mon Sep 17 00:00:00 2001 From: "mhamriweb@gmail.com" Date: Sat, 13 Feb 2021 21:52:36 +0800 Subject: [PATCH 1/6] fix for taliwind package and add autoprefixer --- docs/assets-css.md | 81 +++++++++++++++++++++++++++++++++------------- 1 file changed, 58 insertions(+), 23 deletions(-) diff --git a/docs/assets-css.md b/docs/assets-css.md index 5c373146e..faf927fb8 100644 --- a/docs/assets-css.md +++ b/docs/assets-css.md @@ -154,9 +154,15 @@ yarn add tailwindcss To install PostCSS-PurgeCSS: ```shell -npm i -D @fullhuman/postcss-purgecss +npm i -D @fullhuman/postcss-purgecss@2.x.x ``` +to install autoPrefixer: +```shell +npm i -D autoprefixer@9.8.6 +``` + + Then, create a `main.css` file in the root of your `/src` directory and add the following: ```css @tailwind base; @@ -167,7 +173,7 @@ Then, create a `main.css` file in the root of your `/src` directory and add the ``` Now import the `main.css` file into your project. In the `main.js` file add `require('~/main.css')`. Afterwards, your `main.js` file should look something like this: -```javascript +```javascript {1} // Import global styles require('~/main.css') @@ -196,35 +202,36 @@ module.exports = { } ``` -Learn more about customizing your TailwindCSS installation in Tailwind's [configuration documentation](https://tailwindcss.com/docs/configuration/) +since we are using the `purgeCss` we don't need to set the [purge config](https://tailwindcss.com/docs/optimizing-for-production#removing-unused-css) in the `tailwind.config.js`, but when we try to create a build, the tailwind will warn us about the it (which you can ignore), but if you'd like to disable the warning you can set it to `false`. -Next, `gridsome.config.js` needs to be updated to add our TailwindCSS and PurgeCSS configuration: - -```javascript -const tailwind = require('tailwindcss') -const purgecss = require('@fullhuman/postcss-purgecss') - -const postcssPlugins = [ - tailwind(), -] - -if (process.env.NODE_ENV === 'production') postcssPlugins.push(purgecss(require('./purgecss.config.js'))) +```javascript {2} module.exports = { - siteName: 'Gridsome', - plugins: [], - css: { - loaderOptions: { - postcss: { - plugins: postcssPlugins, - }, - }, + purge: false + theme: { + extend: {} }, + variants: {}, + plugins: [] } +``` + +Learn more about customizing your TailwindCSS installation in Tailwind's [configuration documentation](https://tailwindcss.com/docs/configuration/) + +next, add a `.browserslistrc` to the root of your project. we need it for [autoprefixer](https://github.com/postcss/autoprefixer#readme). + +and set the content to: ``` +>0.2% +not dead +not op_mini all +``` + +here, we are targeting any browser that has more than 0.2% usage worldwide and it's not dead and it's not any version of opera mini. Learn more about [browserLint] (https://github.com/browserslist/browserslist#environment-variables) syntax in their documentation. -Finally, create a `purgecss.config.js` file in the root of your project and add the configuration below: + +Next, create a `purgecss.config.js` file in the root of your project and add the configuration below: ```javascript module.exports = { @@ -254,6 +261,34 @@ module.exports = { } ``` +Finally, `gridsome.config.js` needs to be updated to add our TailwindCSS and PurgeCSS configuration: + +```javascript +const tailwind = require('tailwindcss'); +const purgeCss = require('@fullhuman/postcss-purgecss'); +const autoPrefixer = require('autoprefixer'); + +const postcssPlugins = [tailwind()]; + +if (process.env.NODE_ENV === 'production') { + postcssPlugins.push(purgeCss(require('./purgecss.config.js'))); + postcssPlugins.push(autoPrefixer()); +} + +module.exports = { + siteName: 'Gridsome', + plugins: [], + css: { + loaderOptions: { + postcss: { + plugins: postcssPlugins, + }, + }, + }, +} + +``` + Be sure to restart the `gridsome develop` command to ensure the changes are compiled in the current build. ## Bulma From ef94fe6cda8c1264135a7be44bbf2ecf669777de Mon Sep 17 00:00:00 2001 From: "mhamriweb@gmail.com" Date: Sat, 13 Feb 2021 21:54:36 +0800 Subject: [PATCH 2/6] update line numbers --- docs/assets-css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/assets-css.md b/docs/assets-css.md index faf927fb8..ec8881c31 100644 --- a/docs/assets-css.md +++ b/docs/assets-css.md @@ -173,7 +173,7 @@ Then, create a `main.css` file in the root of your `/src` directory and add the ``` Now import the `main.css` file into your project. In the `main.js` file add `require('~/main.css')`. Afterwards, your `main.js` file should look something like this: -```javascript {1} +```javascript {1,2} // Import global styles require('~/main.css') From dc6b128ae2602e44b903601a3f558863effd0dd3 Mon Sep 17 00:00:00 2001 From: "mhamriweb@gmail.com" Date: Sat, 13 Feb 2021 21:55:50 +0800 Subject: [PATCH 3/6] fix typo --- docs/assets-css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/assets-css.md b/docs/assets-css.md index ec8881c31..471501909 100644 --- a/docs/assets-css.md +++ b/docs/assets-css.md @@ -202,7 +202,7 @@ module.exports = { } ``` -since we are using the `purgeCss` we don't need to set the [purge config](https://tailwindcss.com/docs/optimizing-for-production#removing-unused-css) in the `tailwind.config.js`, but when we try to create a build, the tailwind will warn us about the it (which you can ignore), but if you'd like to disable the warning you can set it to `false`. +since we are using the `purgeCss` we don't need to set the [purge config](https://tailwindcss.com/docs/optimizing-for-production#removing-unused-css) in the `tailwind.config.js`, but when we try to create a build, the tailwind will warn us about it (which you can ignore), but if you'd like to disable the warning you can set it to `false`. ```javascript {2} From 8fd6b624303d72a4acd6aaa0dcf6c3b3c9a62e8a Mon Sep 17 00:00:00 2001 From: "mhamriweb@gmail.com" Date: Sat, 13 Feb 2021 21:56:26 +0800 Subject: [PATCH 4/6] make it more clear --- docs/assets-css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/assets-css.md b/docs/assets-css.md index 471501909..920986878 100644 --- a/docs/assets-css.md +++ b/docs/assets-css.md @@ -202,7 +202,7 @@ module.exports = { } ``` -since we are using the `purgeCss` we don't need to set the [purge config](https://tailwindcss.com/docs/optimizing-for-production#removing-unused-css) in the `tailwind.config.js`, but when we try to create a build, the tailwind will warn us about it (which you can ignore), but if you'd like to disable the warning you can set it to `false`. +since we are using the `purgeCss` we don't need to set the [purge config](https://tailwindcss.com/docs/optimizing-for-production#removing-unused-css) in the `tailwind.config.js`, but when we try to create a build, the tailwind will warn us about it (which you can ignore), but if you'd like to disable the warning you can set `purge` to `false`. ```javascript {2} From 017a5f1b2c1dfdef8a22bdd59a17d585746212e1 Mon Sep 17 00:00:00 2001 From: "mhamriweb@gmail.com" Date: Sat, 13 Feb 2021 21:58:24 +0800 Subject: [PATCH 5/6] more info --- docs/assets-css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/assets-css.md b/docs/assets-css.md index 920986878..b814216a3 100644 --- a/docs/assets-css.md +++ b/docs/assets-css.md @@ -261,7 +261,7 @@ module.exports = { } ``` -Finally, `gridsome.config.js` needs to be updated to add our TailwindCSS and PurgeCSS configuration: +Finally, `gridsome.config.js` needs to be updated to add our TailwindCSS, PurgeCSS and AutoPrefixer configuration: ```javascript const tailwind = require('tailwindcss'); From 54c004276c95d94bf8e93d9ca449fb6edde6fcc9 Mon Sep 17 00:00:00 2001 From: "mhamriweb@gmail.com" Date: Sat, 13 Feb 2021 22:10:45 +0800 Subject: [PATCH 6/6] markdown lint --- docs/assets-css.md | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/docs/assets-css.md b/docs/assets-css.md index b814216a3..c85bb11df 100644 --- a/docs/assets-css.md +++ b/docs/assets-css.md @@ -162,7 +162,6 @@ to install autoPrefixer: npm i -D autoprefixer@9.8.6 ``` - Then, create a `main.css` file in the root of your `/src` directory and add the following: ```css @tailwind base; @@ -202,8 +201,7 @@ module.exports = { } ``` -since we are using the `purgeCss` we don't need to set the [purge config](https://tailwindcss.com/docs/optimizing-for-production#removing-unused-css) in the `tailwind.config.js`, but when we try to create a build, the tailwind will warn us about it (which you can ignore), but if you'd like to disable the warning you can set `purge` to `false`. - +since we are using the `purgeCss` we don't need to set the [purge config](https://tailwindcss.com/docs/optimizing-for-production#removing-unused-css) in the `tailwind.config.js`, but when we try to create a build, the tailwind will warn us about it (which you can ignore), but if you'd like to disable the warning you can set `purge` to `false`. ```javascript {2} module.exports = { @@ -218,11 +216,11 @@ module.exports = { Learn more about customizing your TailwindCSS installation in Tailwind's [configuration documentation](https://tailwindcss.com/docs/configuration/) -next, add a `.browserslistrc` to the root of your project. we need it for [autoprefixer](https://github.com/postcss/autoprefixer#readme). +next, add a `.browserslistrc` to the root of your project. we need it for [autoprefixer](https://github.com/postcss/autoprefixer#readme). -and set the content to: +and set the content to: -``` +```text >0.2% not dead not op_mini all @@ -230,7 +228,6 @@ not op_mini all here, we are targeting any browser that has more than 0.2% usage worldwide and it's not dead and it's not any version of opera mini. Learn more about [browserLint] (https://github.com/browserslist/browserslist#environment-variables) syntax in their documentation. - Next, create a `purgecss.config.js` file in the root of your project and add the configuration below: ```javascript