Skip to content

Commit a2d8db5

Browse files
rigor789rigor789
committed
chore: cleanup + docs
1 parent e53afd1 commit a2d8db5

15 files changed

+3661
-4359
lines changed

Diff for: ‎.github/dependabot.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
version: 2
22
updates:
3-
- package-ecosystem: npm
3+
- package-ecosystem: yarn
44
directory: "/"
55
schedule:
66
interval: weekly

Diff for: ‎README.md

+86-87
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# @nativescript/tailwind
22

3+
:alert: This `rc` version requires `@nativescript/[email protected].*` to work properly.
4+
35
Makes using [Tailwind CSS](https://tailwindcss.com/) in NativeScript a whole lot easier!
46

57
```html
@@ -11,34 +13,23 @@ Makes using [Tailwind CSS](https://tailwindcss.com/) in NativeScript a whole lot
1113

1214
![Tailwind CSS is awesome!](https://user-images.githubusercontent.com/879060/81098285-73e3ad80-8f09-11ea-8cfa-7e2ec2eebcde.png)
1315

14-
# Usage (with @nativescript/webpack version 5.x)
16+
# Usage
17+
18+
> **Note:** This guide assumes you are using `@nativescript/[email protected]` as some configuration is done automatically. If you have not upgraded yet, please read the docs below for usage with older `@nativescript/webpack` versions.
1519
1620
Install `@nativescript/tailwind` and `tailwindcss`
1721

18-
```bash
22+
```cli
1923
npm install --save @nativescript/tailwind tailwindcss
2024
```
2125

22-
Change your `app.css` or `app.scss` to include the tailwind utilities
23-
24-
```css
25-
@tailwind components;
26-
@tailwind utilities;
27-
```
26+
Generate a `tailwind.config.js` with
2827

29-
Start using tailwind.
30-
31-
# Using Tailwind CSS JIT (just in time)
32-
33-
Tailwind's new jit mode is supported, it just has to be enabled in the config. See https://tailwindcss.com/docs/just-in-time-mode#enabling-jit-mode for details.
34-
35-
To generate a blank config, you can run
36-
37-
```bash
28+
```cli
3829
npx tailwindcss init
3930
```
4031

41-
Example config with `jit` enabled:
32+
Adjust `content`, `darkMode`, `corePlugins` plus any other settings you need, here are the values we recommend:
4233

4334
```js
4435
// tailwind.config.js
@@ -47,18 +38,29 @@ module.exports = {
4738
content: [
4839
'./app/**/*.{css,xml,html,vue,svelte,ts,tsx}'
4940
],
50-
darkMode: false, // or 'media' or 'class'
41+
// use .dark to toggle dark mode - since 'media' (default) does not work in NativeScript
42+
darkMode: 'class',
5143
theme: {
5244
extend: {},
5345
},
54-
variants: {
55-
extend: {},
56-
},
5746
plugins: [],
47+
corePlugins: {
48+
preflight: false // disables browser-specific resets
49+
}
5850
}
5951
```
6052

61-
# Using a PostCSS config
53+
Change your `app.css` or `app.scss` to include the tailwind utilities
54+
55+
```css
56+
@tailwind base;
57+
@tailwind components;
58+
@tailwind utilities;
59+
```
60+
61+
Start using tailwind in your app.
62+
63+
# Using a custom PostCSS config
6264

6365
In case you need to customize the postcss configuration, you can create a `postcss.config.js` (other formats are supported, see https://github.com/webpack-contrib/postcss-loader#config-files) file and add any customizations, for example:
6466

@@ -75,94 +77,91 @@ module.exports = {
7577

7678
> **Note:** if you want to apply customizations to `tailwindcss` or `@nativescript/tailwind`, you will need to disable autoloading:
7779
>
78-
> ```bash
80+
> ```cli
7981
> ns config set tailwind.autoload false
8082
> ```
8183
> This is required only if you make changes to either of the 2 plugins - because by default `postcss-loader` processes the config file first, and then the `postcssOptions` passed to it. With autoloading enabled, any customizations will be overwritten due to the loading order. Setting `tailwind.autoload` to `false` just disables the internal loading of these plugins, and requires you to manually add them to your postcss config in the above order.
8284
83-
84-
## Usage (with @nativescript/webpack version <5.x)
85+
## Usage with older @nativescript/webpack versions
8586
8687
This usage is considered legacy and will not be supported - however we are documenting it here in case your project is still using older `@nativescript/webpack`.
8788
8889
<details>
8990
9091
<summary>See instructions</summary>
9192
92-
```bash
93-
npm install --save-dev @nativescript/tailwind tailwindcss postcss postcss-loader
94-
```
95-
96-
Create `postcss.config.js` with the following:
97-
98-
```js
99-
module.exports = {
100-
plugins: [
101-
require('tailwindcss'),
102-
require('nativescript-tailwind')
103-
]
104-
}
105-
```
106-
107-
Change your `app.css` or `app.scss` to include the tailwind utilities
108-
109-
```css
110-
@tailwind components;
111-
@tailwind utilities;
112-
```
113-
114-
Update `webpack.config.js` to use PostCSS
115-
116-
Find the section of the config that defines the rules/loaders for different file types.
117-
To quickly find this block - search for `rules: [`.
118-
119-
For every css/scss block, append the `postcss-loader` to the list of loaders, for example:
120-
```diff
121-
{
122-
test: /[\/|\\]app\.css$/,
123-
use: [
124-
'nativescript-dev-webpack/style-hot-loader',
125-
{
126-
loader: "nativescript-dev-webpack/css2json-loader",
127-
options: { useForImports: true }
128-
},
129-
+ 'postcss-loader',
130-
],
131-
}
132-
```
133-
**Make sure you append `postcss-loader` to all css/scss rules in the config.**
93+
```cli
94+
npm install --save-dev @nativescript/tailwind tailwindcss postcss postcss-loader
95+
```
13496
135-
</details>
97+
Create `postcss.config.js` with the following:
13698

137-
## Usage with the pre-built css
99+
```js
100+
module.exports = {
101+
plugins: [
102+
require('tailwindcss'),
103+
require('nativescript-tailwind')
104+
]
105+
}
106+
```
138107

139-
`@nativescript/tailwind` ships with a pre-built `dist/tailwind.css` file that's built using the default tailwind config.
140108

141-
Using the pre-built css is not recommended, since you lose the ability to configure tailwind, jit, purging etc.
109+
Generate a `tailwind.config.js` with
142110

143-
<details>
144-
145-
<summary>See instructions</summary>
111+
```cli
112+
npx tailwindcss init
113+
```
146114

147-
Import the pre-built css file in your `app.css` (or `scss`):
115+
Adjust `content`, `darkMode`, `corePlugins` plus any other settings you need, here are the values we recommend:
148116

149-
```css
150-
@import "@nativescript/tailwind/dist/tailwind.css"
117+
```js
118+
// tailwind.config.js
119+
120+
module.exports = {
121+
content: [
122+
'./app/**/*.{css,xml,html,vue,svelte,ts,tsx}'
123+
],
124+
// use .dark to toggle dark mode - since 'media' (default) does not work in NativeScript
125+
darkMode: 'class',
126+
theme: {
127+
extend: {},
128+
},
129+
plugins: [],
130+
corePlugins: {
131+
preflight: false // disables browser-specific resets
132+
}
133+
}
151134
```
152135

153-
Alternatively, import it in your `main.js` (or `main.ts`, `app.js`, `app.ts` etc.)
136+
Change your `app.css` or `app.scss` to include the tailwind utilities
154137

155-
```js
156-
import '@nativescript/tailwind/dist/tailwind.css'
138+
```css
139+
@tailwind base;
140+
@tailwind components;
141+
@tailwind utilities;
157142
```
158143

159-
In `.vue` files you can also do
160-
161-
```html
162-
<style src="@nativescript/tailwind/dist/tailwind.css" />
144+
Update `webpack.config.js` to use PostCSS
145+
146+
Find the section of the config that defines the rules/loaders for different file types.
147+
To quickly find this block - search for `rules: [`.
148+
149+
For every css/scss block, append the `postcss-loader` to the list of loaders, for example:
150+
151+
```diff
152+
{
153+
test: /[\/|\\]app\.css$/,
154+
use: [
155+
'nativescript-dev-webpack/style-hot-loader',
156+
{
157+
loader: "nativescript-dev-webpack/css2json-loader",
158+
options: { useForImports: true }
159+
},
160+
+ 'postcss-loader',
161+
],
162+
}
163163
```
164164

165-
> **Note:** make sure you only include this once (for example in `App.vue`) - otherwise your bundle will contain the whole tailwind.css file multiple times.
166-
165+
**Make sure you append `postcss-loader` to all css/scss rules in the config.**
167166

168167
</details>

Diff for: ‎build.js

-33
This file was deleted.

Diff for: ‎demo/.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ hooks/
33
node_modules/
44
platforms/
55

6+
# lockfiles
7+
yarn.lock
8+
package-lock.json
9+
610
# Logs
711
logs
812
*.log

Diff for: ‎demo/App_Resources/Android/src/main/AndroidManifest.xml

+2-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@
2626
android:name="com.tns.NativeScriptActivity"
2727
android:label="@string/title_activity_kimera"
2828
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode"
29-
android:theme="@style/LaunchScreenTheme">
29+
android:theme="@style/LaunchScreenTheme"
30+
android:exported="true">
3031

3132
<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />
3233

Diff for: ‎demo/app/app.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1-
@tailwind components;
1+
@tailwind base;
2+
@tailwind components;
23
@tailwind utilities;

0 commit comments

Comments
 (0)