Using Tailwind via CDN

[TonsOfLaz]

I ask this as a person who has not researched Tailwind yet so please be kind, I mean no disrespect I just haven't had a chance to look over it yet, I have just been following the concept and it sounds very interesting.

My question: Can I add this to my project with a regular external link css tag, or through a cdn? As in, can it be encapsulated into a single include, or do I need to have some npm, etc set up to work with it?

If not, is it possible or are there any plans to do it as such? I ask because that's just where I am at right now with front end tooling.

[HellPat]

Can I add this to my project with a regular external link css tag, or through a cdn?

In theory you can link the processed utility-classes that way. But they are not provided by tailwind (as far as I know) because you loose the best parts of tailwind => easy customizing.

Do you remember the time when every Website looked like "oh, they use bootstrap". This should not happen with tailwind.

You can read the Instructions for tailwind.

Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that it's not a UI kit. It doesn't have a default theme and there's no built-in UI components.

[...]

it's an engine for creating design systems

You are encouraged to implement your own design. Not like with bootstrap, cripple a design somebody else did.

If you want "Drop in Utilities" you could look at one of these:

• http://basscss.com/
• https://bulma.io/
• many more

But i strongly recommend looking at tailwind. I use it for a day now and I'm in love (in fact I decided to use tailwind from now on for everything).

Try it if you have time to and try it with a proper workflow. You can also use the Starter-Kit based on gulp by "@simonswiss" or the really simple tailwind css cli tool.

But yeah, you should have npm ;-)

[adamwathan]

Hey @TonsOfLaz! While you definitely need to pull in Tailwind as part of a build system to really take advantage of all of it's features, you can pull down a pre-compiled version of all the default styles using this CDN link:

https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css

Here's a link tag you can copy to try it out:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">

For projects where you want to be able to customize things this isn't going to be the way to go, but it's definitely a great quick way to pull Tailwind down for quick prototyping, hacking something out, or just giving it a try to see if you like it.

I've just pushed up separate pre-compiled files for our base styles and utilities too, so after we tag the next release you will be able to pull those in separately using these links:

https://cdn.jsdelivr.net/npm/tailwindcss/dist/preflight.min.css https://cdn.jsdelivr.net/npm/tailwindcss/dist/utilities.min.css

Hope that helps!

[adamwathan]

@TonsOfLaz I've updated the issue title to make it easier for other people to find this thread in case they have the same question, hope you don't mind!

[TonsOfLaz]

Thanks very much @psren and @adamwathan ! This is exactly what I was looking for, to put the features into a broader context and get an idea of how to get started easily. Much appreciated.

[mkarnicki]

@psren "(in fact I decided to use tailwind from now on for everything)" 🎉🎉🎉 Same here!

[aaemnnosttv]

Now that there are dist files in the repo, you could also use rawgit.com.

[whitewaves]

@adamwathan can we get an easier way of using @tailwindcss on Angular Project without ejecting? Something like a drop in Module?

[adamwathan]

Haven't used Angular since Angular 1 so not sure how it works, but happy to link to a project like that from the docs if someone wants to build it.

[BasyaLipman]

@adamwathan angular 6 no longer allows ejecting. I'd love to try tailwind out on our angular projects...

[mihaliak]

@BasyaLipman I used meltedspark/angular-builders to use custom postcss webpack config with tailwindcss.

It works ok for development, for production build it doesnt work, I have opened issue after if will be fixed you can use that package when you want to use tailwind.

Anyway in my opinion, we should have some kind of guides how to use tailwind in frameworks, ie vue, angular, react etc.

[zoltanszogyenyi]

This is an older thread but in the past few days I've set up a custom CDN just for Tailwind CSS. I know there are other CDN's out there but this project is open source and I'll add a few nice customizable things to the website.

https://tailwindcdn.com/ Repo: https://github.com/crafty-dwarf/tailwind-cdn

@adamwathan It would be an honor if at some point this would be the recommended CDN for Tailwind! I'm open to work together on this. The files are stored on Amazon S3 and the CDN is managed by Stackpath.