docs: more infos about the recommended preset

README.md

@@ -10,8 +10,19 @@ Rules enforcing best practices and consistency using [Tailwind CSS](https://tail
 >
 > 👍 Most of [the new JIT mode features](https://tailwindcss.com/docs/just-in-time-mode#new-features) are also supported.
 
+## Supported Rules
+
+Learn more about each supported rules by reading their documentation:
+
+- [`classnames-order`](docs/rules/classnames-order.md): order classnames by target properties then by variants (`[size:][theme:][state:]`)
+- [`no-custom-classname`](docs/rules/no-custom-classname.md): only allow classnames from Tailwind CSS and the values from the `whitelist` option
+- [`no-contradicting-classname`](docs/rules/no-contradicting-classname.md): e.g. avoid `p-2 p-3`, different Tailwind CSS classnames (`pt-2` & `pt-3`) but targeting the same property several times for the same variant.
+
+Using ESLint extension for Visual Studio Code, you will get these messages
 ![detected-errors](https://user-images.githubusercontent.com/704026/120854472-83567f80-c57d-11eb-9eaa-18d33b98c60c.png)
 
+You can can the same information on your favorite command line software as well.
+
 ## Installation
 
 You'll first need to install [ESLint](http://eslint.org):
@@ -26,9 +37,15 @@ Next, install `eslint-plugin-tailwindcss`:
 $ npm i eslint-plugin-tailwindcss --save-dev
 ```
 
-[eslint-plugin-tailwindcss on npm](https://www.npmjs.com/package/eslint-plugin-tailwindcss)
+Add `tailwindcss` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:
+
+```json
+{
+  "plugins": ["tailwindcss"]
+}
+```
 
-## Usage
+## Configuration
 
 Use our preset to get reasonable defaults:
 
@@ -40,16 +57,10 @@ Use our preset to get reasonable defaults:
 
 If you do not use a preset you will need to specify individual rules and add extra configuration:
 
-Add `tailwindcss` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:
-
-```json
-{
-  "plugins": ["tailwindcss"]
-}
-```
-
 Configure the rules you want to use under the rules section.
 
+> The following lines are matching the configuration saved `recommended` preset...
+
 ```json
 {
   "rules": {
@@ -93,14 +104,6 @@ The plugin will look for each setting value in this order and stop looking as so
 2. In the shared settings (plugin level)
 3. Default value of the requested setting (plugin level)...
 
-## Supported Rules
-
-Learn more about each supported rules by reading their documentation:
-
-- [`classnames-order`](docs/rules/classnames-order.md): order classnames by target properties then by variants (`[size:][theme:][state:]`)
-- [`no-custom-classname`](docs/rules/no-custom-classname.md): only allow classnames from Tailwind CSS and the values from the `whitelist` option
-- [`no-contradicting-classname`](docs/rules/no-contradicting-classname.md): e.g. avoid `p-2 p-3`, different Tailwind CSS classnames (`pt-2` & `pt-3`) but targeting the same property several times for the same variant.
-
 ## Upcoming Rules
 
 - `no-redundant-variant`: e.g. avoid `mx-5 sm:mx-5`, no need to redefine `mx` in `sm:` variant as it uses the same value (`5`)