fix: better clarification between the native and css tailwind plugins

package.json

@@ -39,6 +39,7 @@
   },
   "files": [
     "dist/",
+    "tailwind/",
     "postcss.js",
     "babel.js",
     "plugin.js",

plugin.js

@@ -1 +1,4 @@
+// @deprecared This will be removed in v2. Please use either
+// - `tailwindcss-react-native/tailwind/native`
+// - `tailwindcss-react-native/tailwind/css`
 module.exports = require("./dist/tailwind").default;

src/postcss/plugin.ts

@@ -90,7 +90,7 @@ export const plugin: PluginCreator<PostcssPluginOptions> = ({
           output,
           `// This file was generated by tailwindcss-react-native. Do not edit!
 module.exports = {
-  platform: '${platform}',
+  ${platform ? `platform: '${platform},` : ""}
   styles: ${JSON.stringify(serialised.styles)},
   media: ${JSON.stringify(serialised.media)},
 }`

tailwind/css.js

@@ -0,0 +1 @@
+module.exports = require("../dist/tailwind").default;

tailwind/native.js

@@ -0,0 +1 @@
+module.exports = require("../dist/tailwind/native").nativePlugin;

website/docs/compilation/cli-css.md

@@ -13,7 +13,21 @@ This preview feature allows you to use the Tailwind CLI to generate CSS styleshe
 
 Follow the [setup guide for Tailwind CLI](https://tailwindcss.com/docs/installation).
 
-### 2. Enable preview features
+### 2. Modify your `tailwind.config.js` to include the CSS plugin
+
+```diff
+// tailwind.config.js
++ const tailwindcssReactNative = require("tailwindcss-react-native/tailwind/css")
++
+module.exports = {
+  content: [
+    './App.{js,ts,jsx,tsx}',
+  ],
++ plugins: [tailwindcssReactNative()],
+};
+```
+
+### 3. Enable preview features
 
 You will need to enable preview features on your `TailwindProvider`
 

website/docs/compilation/cli-native.md

@@ -11,14 +11,25 @@ The Tailwind CLI can be used to output precompiled RN StyleSheet objects.
 ```js
 // postcss.config.js
 module.exports = {
-  plugins: [
-    [
-      require("tailwindcss-react-native/postcss"),
-      {
-        /* options */
-      },
-    ],
+  plugins: {
+    "tailwindcss-react-native/postcss": {
+      output: "tailwindcss-react-native-output.js",
+    },
+  },
+};
+```
+
+### 2. Add the native tailwind plugin to your `tailwind.config.js`
+
+```diff
+// tailwind.config.js
++ const tailwindcssReactNative = require("tailwindcss-react-native/tailwind/native")
++
+module.exports = {
+  content: [
+    './App.{js,ts,jsx,tsx}',
   ],
++ plugins: [tailwindcssReactNative()],
 };
 ```
 

website/docs/installation.md

@@ -5,7 +5,7 @@ import TabItem from '@theme/TabItem';
 
 ## 1. Install the dependancies
 
-First, you will need to install both `tailwindcss-react-native` and `tailwindcss`
+You will need to install both `tailwindcss-react-native` and `tailwindcss`
 
 `tailwindcss` is not used during runtime so it can be added as a development dependancy.
 
@@ -30,14 +30,13 @@ yarn add --dev tailwindcss
 
 ## 2. Setup Tailwindcss
 
-Tailwindcss requires a `tailwind.config.js` file with the content section configured to include the paths to all of your JavaScript components, and any other source files that contain Tailwind class names.
+Tailwindcss requires a `tailwind.config.js` file with the content section configured to include the paths to all of your components and any other source files that contain Tailwind class names.
 
 If you are not already familiar with Tailwind CSS, we recommend reading its [configuration documentation](https://tailwindcss.com/docs/configuration)
 
 ```js
 // tailwind.config.js
 module.exports = {
-  plugins: [require("tailwindcss-react-native/plugin")],
   content: [
     "./screens/**/*.{js,ts,jsx,tsx}",
     "./pages/**/*.{js,ts,jsx,tsx}",
@@ -61,8 +60,8 @@ function MyAppsProviders({ children }) {
 
 ## 4. Setup compilation
 
-As `tailwindcss-react-native` targets multiple platforms & frameworks, it supports multiple ways to setup compilation.
+As `tailwindcss-react-native` targets multiple platforms & frameworks, it supports multiple ways to setup compilation. The next step is to follow one of the compilation guides in the sidebar.
 
-If you are using a framework, we recommending reading its specific framework guide, or follow a general compilation guide.
+If you are using a framework there are specific framework guides under the framework section.
 
 If you are unsure what guide to use, we recommend [Babel](./compilation/babel.md) which has the smallest setup and best out-of-the-box experience.