-
Notifications
You must be signed in to change notification settings - Fork 183
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat!: upgrade to tailwindcss@2 (#270) * chore: add alpha release script * chore(release): 4.0.0-0 * chore(deps): update all non-major dependencies (#276) Co-authored-by: Renovate Bot <bot@renovateapp.com> * chore: don't force darkMode option * chore(release): 4.0.0-1 * fix: use purge as object and force it to provide purge options * chore: update test to use purge.content * chore(release): 4.0.0-2 * chore: add postcss-nested instead of preset Waiting for csstools/postcss-preset-env#191 to be ready * chore(release): 4.0.0-3 * chore: add autoprefixer too * chore(release): 4.0.0-4 * update nuxt-postcss8 * update to @nuxt/postcss8 * chore(release): 4.0.0-5 * feat: tailwind jit (#288) * feat: add Tailwind JIT support * chore: improvements * chore: remove duplicate postcss-nested * chore: simplify * chore(release): 4.0.0-6 * generate .nuxt/tailwind.config.js and use it for tailwind options + tailwind.jit option Co-authored-by: Sébastien Chopin <seb@nuxtjs.com> * chore: fix lint issue * skip config dependent tests for now * chore(release): 4.0.0-7 * refactor: typescript rewrite * chore(release): 4.0.0-8 * remove wronly checked-in file * fix: dont expose config without option defined * chore(release): 4.0.0-9 * fix: revert to using object syntax * chore(release): 4.0.0-10 * chore: add _hash to tailwind config * chore: upgrade deps * chore: update jit * docs: update readme * chore(release): 4.0.0-11 * chore(release): 4.0.0-12 * docs: prepare docs * docs: fix links * fix: missing dependency * chore: upgrade docus * docs: add tailwindcss * docs: upgrade docus * docs: small improvement * docs: wtf netlify build * docs: phrasing * chore: ignore Co-authored-by: Romain Lanz <2793951+RomainLanz@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>
- Loading branch information
5 people
authored
Mar 15, 2021
1 parent
a133848
commit 15a86a9
Showing
45 changed files
with
3,876 additions
and
2,526 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,5 @@ | ||
| # Common | ||
| node_modules | ||
| dist | ||
| .nuxt | ||
| coverage | ||
|
|
||
| # Plugin | ||
| lib/plugin.js | ||
| src/*.js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| { | ||
| "extends": [ | ||
| "@nuxtjs/eslint-config-typescript" | ||
| ] | ||
| } |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| --- | ||
| category: Getting started | ||
| --- | ||
|
|
||
| # Setup | ||
|
|
||
| > Using TailwindCSS in your Nuxt project is only one command away ✨ | ||
| ## Prerequisites | ||
|
|
||
| Tailwind 2 needs PostCSS 8, to work with Nuxt 2, this module uses [@nuxt/postcss8](https://github.com/nuxt/postcss8) that requires Nuxt `>= 2.15.3`. | ||
|
|
||
| <d-alert> | ||
|
|
||
| Please make sure to update your Nuxt version to be minimum [v2.15.3](https://github.com/nuxt/nuxt.js/releases/tag/v2.15.3). | ||
|
|
||
| </d-alert> | ||
|
|
||
| <d-code-group> | ||
| <d-code-block label="Yarn" active> | ||
|
|
||
| ```bash | ||
| yarn upgrade nuxt | ||
| ``` | ||
|
|
||
| </d-code-block> | ||
| <d-code-block label="NPM"> | ||
|
|
||
| ```bash | ||
| npm update nuxt | ||
| ``` | ||
|
|
||
| </d-code-block> | ||
| </d-code-group> | ||
|
|
||
|
|
||
| ## Installation | ||
|
|
||
| 1. Add `@nuxtjs/tailwindcss` and `postcss` dependencies to your project: | ||
|
|
||
| <d-code-group> | ||
| <d-code-block label="Yarn" active> | ||
|
|
||
| ```bash | ||
| yarn add --dev @nuxtjs/tailwindcss postcss@latest | ||
| ``` | ||
|
|
||
| </d-code-block> | ||
| <d-code-block label="NPM"> | ||
|
|
||
| ```bash | ||
| npm install --save-dev @nuxtjs/tailwindcss postcss@latest | ||
| ``` | ||
|
|
||
| </d-code-block> | ||
| </d-code-group> | ||
|
|
||
| 2. Add it to your `buildModules` section in your `nuxt.config.js`: | ||
|
|
||
| ```ts [nuxt.config.js] | ||
| export default { | ||
| buildModules: ['@nuxtjs/tailwindcss'] | ||
| } | ||
| ``` | ||
|
|
||
| 3. Create your `tailwind.config.js` running: | ||
|
|
||
| ```bash | ||
| npx tailwindcss init | ||
| ``` | ||
|
|
||
| <d-alert type="success"> | ||
|
|
||
| That's it! You can now use Tailwind classes in your Nuxt app ✨ | ||
| </d-alert> | ||
| <d-alert type="info"> | ||
| Discover your color palette based on your Tailwind config with the [Tailwind viewer](/tailwind/viewer). | ||
| </d-alert> | ||
| ## Tailwind Just-In-Time | ||
| Tailwind recelently released [@tailwindcss/jit](https://github.com/tailwindlabs/tailwindcss-jit) to make the web development much faster. | ||
| To activate the option, set `jit: true` in your `nuxt.config.js`: | ||
| ```ts [nuxt.config.js] | ||
| export default { | ||
| tailwindcss: { | ||
| jit: true | ||
| } | ||
| } | ||
| ``` | ||
| Restart your Nuxt server and see how fast it is now ⚡️ | ||
| ## Tailwind Files | ||
| When running `nuxt dev`, this module will look for these two files: | ||
| - `./assets/css/tailwind.css` | ||
| - `./tailwind.config.js` | ||
| If they don't exist, the module will inject a basic configuration for each one so you don't have to create these files. | ||
| <d-alert type="info"> | ||
| You can configure the paths in the [module options](/options). | ||
| </d-alert> | ||
| Learn more about overwriting the Tailwind configuration in the [Tailwind Config](/tailwind/config) section. | ||
| ## Options | ||
| You can customize the module behaviour by using the `tailwindcss` property in `nuxt.config.js`: | ||
| ```ts [nuxt.config.js] | ||
| export default { | ||
| tailwindcss: { | ||
| // Options | ||
| } | ||
| } | ||
| ``` | ||
| See the [module options](/options). |
Oops, something went wrong.