We are using Tailwind as a standalone CLI tool. For more information, you can refer to the official guide.
Note:If you are setting this up on a Mac with an Intel processor, replace macos-arm64 with macos-x64 in the commands below.
Download the latest TailwindCSS binary for macOS with ARM64 architecture:
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
Make the downloaded file executable:
chmod +x tailwindcss-macos-arm64
Move the executable to a more convenient name:
mv tailwindcss-macos-arm64 tailwindcss
Run the TailwindCSS watcher:
This command will watch for changes in your TailwindCSS source file (./assets/tailwind.css) and compile the output to your desired CSS file (./assets/style.css):
./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --watch
When you are ready to compile your CSS for production, you should use the following command to minify your CSS:
./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --minify
This command will take your input CSS file (./assets/tailwind.css), process it with TailwindCSS, and output a minified CSS file (./assets/style.css) optimized for production.
Following these steps, you have successfully set up TailwindCSS as a standalone CLI tool and integrated it into your project. This setup allows you to efficiently develop and manage your CSS using Tailwind's utility-first approach. Running the watcher ensures that your CSS is automatically compiled during development, while the minification step prepares your CSS for production, optimizing it for performance. This streamlined process helps maintain a clean and maintainable codebase, allowing you to focus on building and customizing your Shopify theme with ease.
The above is the detailed content of How to setup standalone CLI: use Tailwind CSS without Node.js in Shopify.. For more information, please follow other related articles on the PHP Chinese website!