T

5

11

I just started Front-End-Developing and wanted to use Frameworks to make it more simple. So, I discovered Tailwindcss. However, tailwindcss requires my server to have node.js and npm in order to install it and i cant really install these packages on my server. Thats why I wanted to ask if you can use Frameworks, like Tailwindcss or React, without installation. I then later discovered a website called "skypack", where all those packages can be used without installation. Now, in my HTML-File, where I wanted to install Tailwindcss, I have the following written:

    <!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <script type="module">
        import tailwindcss from 'https://cdn.skypack.dev/pin/[email protected]/mode=imports/optimized/tailwindcss.js';

    </script>
    <div class="bg-sky-400 aspect-square"><p>test paragraph</p></div>

  </body>
</html>

Unfortunately, the css isn't applied on the paragraph. Did I import it wrong? Does skypack work at all? And are there other ways to implement Frameworks without npm?

Thanks!

Theophrastus answered 26/9, 2022 at 13:49 Comment(1)

See also: How can I include Tailwind CSS as external source in a Stack Snippet? – Nutrition 20/3 at 15:31

M

9

You can use tailwind CDN

Add these following lines to the <head></head> tag of your HTML page

<head>    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
</head>

Matronize answered 26/9, 2022 at 13:58 Comment(0)

M

3

Tailwind actually released a tool at the end of 2021, which is called Standalone CLI. You can download it here (Official Tailwind Page).

You don't need to install npm to use it, since it's a standalone executable!

Microbiology answered 24/3, 2023 at 22:39 Comment(0)

L

3

You can use the Standalone CLI TailwindCSS tool, you can read more about it in this link.

Basically is the TailwindCSS NPM package but distributed in a .exe file.

It is optimal for production, development and test environments unlike the CDN distribution, which is not optimal for production use at all and is only recommended for use in test and development environments

Limy answered 26/8, 2023 at 16:4 Comment(0)

M

1

For development and/or testing purposes you could use tailwindcss's "Play CDN" option. You can find instructions for that at:

https://tailwindcss.com/docs/installation/play-cdn

For production use you'll really want to follow their instructions here:

https://tailwindcss.com/docs/installation

You'd do that on your desktop/laptop computer or wherever you're developing locally, not on your server. Then run the CLI build process. That process will generate the CSS files you actually include in your HTML.

You don't need to install Node.js and npm on your server. You just need it on your development machine, then you upload the generated files to your server (or however you deploy your code when it's ready for production).

Disclaimer: I'm not an expert with using tailwindcss or even Node.js, I'm just getting into it after having written CSS/JS/HTML by hand for many, many years.

Marney answered 9/10, 2022 at 1:33 Comment(0)

K

0

how to install and configure tailwindCSS executable?

tailwind docs

mkdir ~/.tailwindcss; cd ~/.tailwindcss/
mkdir bin; cd bin
# this works for arm64, check docs for other arch
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
chmod +x tailwindcss-macos-arm64
mv tailwindcss-macos-arm64 tailwindcss

add to your .zshrc or .bashrc:

# tailwindcss
export PATH=$PATH:~/.tailwindcss/bin

now you can use tailwindcss

tailwindcss --help

Kongo answered 29/6 at 18:21 Comment(0)

You can use tailwind CDN

how to install and configure tailwindCSS executable?

now you can use tailwindcss

Recommended topics

Hot tags