Coder Social home page Coder Social logo

pytailwindcss's Introduction

Standalone Tailwind CSS CLI, installable via pip

Use Tailwind CSS without Node.js and install it via pip.

Why

Tailwind CSS is notoriously dependent on Node.js. If you're a Python developer, this dependency may not be welcome in your team, your Docker container, or your inner circle.

The Tailwind CSS team recently announced a new standalone CLI build that gives you the full power of Tailwind CLI in a self-contained executable — no Node.js or npm required.

However, installing such a standalone CLI isn't as easy as running npm install, the installation command for Node.js .

That's why I decided to make it as simple as running pip install command. As a result you can install the standalone * Tailwind CLI* via pip by running the following command:

pip install pytailwindcss

Now you can run tailwindcss in your terminal as:

tailwindcss -i input.css -o output.css --minify

Voila!

Get started

  1. Install tailwindcss via pip by executing the following command:

    pip install pytailwindcss
    
  2. [Optional] Preinstall tailwindcss binary by running the following command:

    tailwindcss_install
    

    If you skip this step, the binary will be downloaded on the first run of tailwindcss command.

  3. The tailwindcss command should now be available in your terminal. Try to run it:

    tailwindcss
    

    If the installation was successful, you should see the message about binary being downloaded on the first run. When download is complete, you should see the help output for the tailwindcss command. Use tailwindcss to create a new project or work with an existing Tailwind CSS project.

  4. Let's create a new project. Go to the directory where you want to host your Tailwind CSS project and initialize it by running:

    tailwindcss init
    

    This command will create the default tailwind.config.js file.

  5. Start a watcher by running:

    tailwindcss -i input.css -o output.css --watch
    
  6. Compile and minify your CSS for production by running:

    tailwindcss -i input.css -o output.css --minify
    

You got it. Please refer to official Tailwind documentation for more information on using Tailwind CSS and its CLI.

Caveats

It's not all roses, though. Giving up Node.js means you won't be able to install plugins or additional dependencies for your Tailwind CSS setup. At the same time, that might not be a dealbreaker. You can still customize Tailwind CSS via the tailwind.config.js file. And the standalone build also comes with all official Tailwind CSS plugins like @tailwindcss/aspect-ratio, @tailwindcss/forms, @tailwindcss/line-clamp, and @tailwindcss/typography. So in 90% of Tailwind CSS usage cases you should be covered, and the setup is so simplified now.

Here is what the Tailwind CSS team says about going the standalone Tailwind CSS route:

If you’re working on a project where you don’t otherwise need Node.js or npm, the standalone build can be a great choice. If Tailwind was the only reason you had a package.json file, this is probably going to feel like a nicer solution.

Bugs and suggestions

If you have found a bug, please use the issue tracker on GitHub.

https://github.com/timonweb/pytailwindcss/issues

2021 (c) Tim Kamanin - A Full Stack Django and Wagtail Developer

pytailwindcss's People

Contributors

kevlened avatar timonweb avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

pytailwindcss's Issues

CSS not showing, getting warnings about missing 'content' in configuration

after running: tailwindcss -i style.css -o output.css --watch

i get an warning about:
warn - The content option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration

i though thar my content paths are wrong. and after trying every possible combination still get that warning and the css isnt working.

i found that that was an issue on: https://tagmerge.com/issue/tailwindlabs/tailwindcss/7210

but i don't know is it relevant.

Can you maybe chek it out?
thanks.

Add Option to Use tailwind-cli-extra

What Is The Problem?

Although pytailwindcss works wonderfully, it is still annoying that so many plugins and especially the widely used daisyui plugin are not supported. This simple, unsupported plugin prevents me and others from using pytailwindcss for several projects. Of course, as mentioned in the caveats section of the readme, not much can be done by pytailwindcss at the moment, since the problem lies within the tailwindcss cli binary used. However, I recently found something that might help.

Suggested Solution

The tailwind-cli-extra project has recognized exactly the problem with the standard tailwindcss cli binary and therefore provides an extended version of it, which also has daisyui plugin built in. pytailwindcss could offer this version of the tailwindcss binary as an alternative to the standard one, which could be switched by setting a special environment variable, for example.
tailwind-cli-extra is fully automated, so the binaries should always be up to date.

The `content` key is missing or empty.

Hi! After installing the package I run the command to generate the output css file but I get the following error:

(venv) [guillermo@arch guarde]$ tailwindcss -i input.css -o style.css --minify

warn - The `content` key is missing or empty. Please populate the content key as Tailwind generates utilities on-demand based on the files that use them. For more information see the documentation: https://tailwindcss.com/docs/content-configuration

Done in 233ms.

I'm guessing I must edit the content key in the tailwind.config.js file but I can't seem to find it inside my venv.
Sorry if it's a silly issue...
Cheers

Binary not found

I configured Flask-Assets to create the output css using Bundle. However in production the binary tailwindcss is not found. This is because after pip install pytailwindcss the binary is not yet created. Locally I can run tailwindcss to create the binary, however this is not possible when deploying to production. I can only list pytailwindcss in requirements.txt but this doesn't create the required binary. Can you make it so that pip install pytailwindcss also creates the binary, so that step 2 of the Get Started is obsolete?

Question: why is ssl used in a 'unverified' mode ?

The code that fetches the tailwindcss binaries from github looks like this:

    # Ensures SSL certificate verification doesn't fail
    ssl._create_default_https_context = ssl._create_unverified_context
    urllib.request.urlretrieve(url, str(dest_filename))

This is called by the main() function.

This means anyone using pytailwindcss after installation will try and download binaries from github.com, but without making sure the binary files come from the correct host, which can lead to all kinds of attack (and defeats the purpose of using SSL in the first place).

If they are legitimate cases for the SSL verification to be skipped, I think the code above can be kept, but only if something like an --insecure option is passed. By the way, this is what both curl and wget do.

Feel free to tell me if I've missed something or if you need more information. I can also work on a patch if you like.

Pytailwindcss doesn't work with Docker

Setting pytailwindcss in the requirements.txt file causes error after tailwindcss command is ran from bash inside the container.

Dockerfile:
COPY requirements.txt /tmp/pip-tmp/
RUN pip --disable-pip-version-check install -r /tmp/pip-tmp/requirements.txt &&
rm -rf /tmp/pip-tmp

Traceback (most recent call last):
File "/usr/local/bin/tailwindcss", line 8, in
sys.exit(main())
File "/usr/local/lib/python3.10/site-packages/pytailwindcss/main.py", line 9, in main
completed_process = pytailwindcss.run(
File "/usr/local/lib/python3.10/site-packages/pytailwindcss/init.py", line 45, in run
install(version, bin_path)
File "/usr/local/lib/python3.10/site-packages/pytailwindcss/init.py", line 69, in install
return install_binary(version, ensure_is_pathlib_path(bin_path))
File "/usr/local/lib/python3.10/site-packages/pytailwindcss/installation.py", line 25, in install_binary
os.makedirs(bin_path.parent, exist_ok=True)
File "/usr/local/lib/python3.10/os.py", line 225, in makedirs
mkdir(name, mode)
PermissionError: [Errno 13] Permission denied: '/usr/local/lib/python3.10/site-packages/pytailwindcss/bin

If you build your container and run pip install pytailwindcss from the bash and run tailwindcss then it works. But not from the requirements.txt

KeyError: 'AMD64'

When I call tailwindcss in the command prompt I get this error:

 File "C:\Users\ianba\AppData\Local\Programs\Python\Python39\lib\runpy.py", line 197, in _run_module_as_main
    return _run_code(code, main_globals, None,
  File "C:\Users\ianba\AppData\Local\Programs\Python\Python39\lib\runpy.py", line 87, in _run_code
    exec(code, run_globals)
  File "C:\Users\ianba\AppData\Local\Programs\Python\Python39\Scripts\tailwindcss.exe\__main__.py", line 7, in <module>
  File "C:\Users\ianba\AppData\Local\Programs\Python\Python39\lib\site-packages\pytailwindcss\__main__.py", line 9, in main
    completed_process = pytailwindcss.run(
  File "C:\Users\ianba\AppData\Local\Programs\Python\Python39\lib\site-packages\pytailwindcss\__init__.py", line 45, in run
    install(version, bin_path)
  File "C:\Users\ianba\AppData\Local\Programs\Python\Python39\lib\site-packages\pytailwindcss\__init__.py", line 69, in install
    return install_binary(version, ensure_is_pathlib_path(bin_path))
  File "C:\Users\ianba\AppData\Local\Programs\Python\Python39\lib\site-packages\pytailwindcss\installation.py", line 27, in install_binary
    binary_name = f"tailwindcss-{detect_target()}"
  File "C:\Users\ianba\AppData\Local\Programs\Python\Python39\lib\site-packages\pytailwindcss\installation.py", line 58, in detect_target
    return format_target(os_name=platform.system(), arch=platform.machine())
  File "C:\Users\ianba\AppData\Local\Programs\Python\Python39\lib\site-packages\pytailwindcss\installation.py", line 70, in format_target
    return {
KeyError: 'AMD64' 

Load blank output.css

it load blank output.css when you run this on the terminal ./tailwindcss -i input.css -o output.css --watch

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.