Getting started with Svelte, Tailwind, and Nrwl NX

• svelte-preprocess

  23 1,705 5.7 TypeScript

  A ✨ magical ✨ Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more.

  

All this file does is export a configuration object for the build of our Svelte application. By default, it uses the svelte-preprocess package, which is a preprocessor for Svelte providing support for PostCSS, SCSS, TypeScript, and much more.

• Tailwind CSS

  1,279 78,370 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

Tailwind is more popular than ever. If you've been following me, you know that I'm a huge fan. Recently I've started exploring Svelte, and wanted to know how to combine it with Tailwind. Not only that, but I also wanted to use Nrwl NX. This is a summary of my findings.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• postcss-preset-env

  9 2,201 6.6 CSS

  Discontinued Convert modern CSS into something browsers understand

  

Third, we enable the postcss-preset-env plugin, which adds support for many other cool things

• svelte-tailwind-nx-template

  1 6 0.0 JavaScript

  A template repository including a Nrwl Nx workspace and a Svelte application configured to use Tailwind

If you're in a hurry, then you can use the template I've prepared and published on Github with the results of this experiment. You can find it here: https://github.com/dsebastien/svelte-tailwind-nx-template

• Svelte

  632 76,402 9.9 JavaScript

  Cybernetically enhanced web apps

  

In this article, I'll show you how to create a Svelte application with Nrwl NX and how install/configure Tailwind.

• PostCSS

  86 28,192 8.8 TypeScript

  Transforming styles with JS plugins

  

PostCSS is a CSS processor that Tailwind relies on to do its magic.

• nx

  346 21,971 10.0 TypeScript

  Smart Monorepos · Fast CI

  

In this article, I'll show you how to create a Svelte application with Nrwl NX and how install/configure Tailwind.

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

Suggest a related project