1

I have a very simple app with some html, css, and ts files. I use swc to compile the typescript and copy over the html/css/assets. Now, I'm looking to add tailwind to my project, but I'm not sure how it will fit in to the build process.

Currently, my build is very simple, I just run swc src -Dw --out-dir=built. However, I'm not sure of the interplay between swc and tailwind. Should I run tailwind first on my src directory, build into some intermediary directory, and then run swc in that directory? Can tailwind even process ts files?

All resources online seem to be tailored for people using react/nextjs with a complicated build system I don't understand.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Simon Berens
  • 554
  • 4
  • 11

1 Answers1

0

TailwindCSS is independent of SWC. So you can run them both separately in either order. And you can run them both on the source files, not the compiled JavaScript.

I'd look into using the TailwindCSS CLI. The docs page for it outlines exactly how to import the resulting css into your simple app. https://tailwindcss.com/docs/installation

Nick
  • 5,108
  • 2
  • 25
  • 58
  • wouldn't I need to run tailwind first to transform html/ts/css? and more importantly how do I maintain build order if I want to watch the files? – Simon Berens Apr 04 '22 at 03:26
  • 1
    Not necessarily, and you shouldn't need to worry about maintaining build order. TailwindCSS simply looks at your source files (HTML, CSS, TS) and then creates a brand new CSS file for you to use. It doesn't actually transform your HTML or TS. – Nick Apr 04 '22 at 03:34
  • I see, thanks! Is there more documentation on the tailwind CLI? The only thing I could find is a [request for more documentation](https://github.com/tailwindlabs/tailwindcss/discussions/2240). Is there also documentation on how tailwind works in general to better understand it? – Simon Berens Apr 04 '22 at 05:03
  • The documentation page I linked above is probably your best bet. Sorry I don't have any more resources for setting up TailwindCSS (I've been using it for over a year and forgot how I learned!). You also may wish to checkout the playground. It won't help you learn to setup Tailwind, but it's a great place to experiment to get used to the framework without having to set it up locally: https://play.tailwindcss.com/ – Nick Apr 04 '22 at 05:58