DEV Community

RM
RM

Posted on

1

Bashing as a Junior Developer (Gone Right !)

Greetings ! welcome to my first post here , i am a junior developer who likes to learn thing today i will show you how i worked on bash to set tailwind CSS ( everything will be linked on GitHub !)

Step 1 : find a good summarized bash syntax

i personally used Prompt Engineering to give me a summarized list with bash code ( i will put it in Github + i will make a prompt engineering post soon )

Step 2 : I made a folder for testing purposes

Testing Folder

Step 3 : Choose where to write your bash script

i personally tried using notepad + vscode i recommend vscode cause you wont have to move files again to the wanted location plus you will notice if there is something wrong !
Ps: if you worked on note and saved it ( in the correct location ) it will be synced to vscode too

BASH CODE


NOW IT IS BASH CODE DETAILS !

Step 1 ) Download Tailwind CSS ! (2 ways)

A) if you want to download it inside a specific folder do the following block :

  • Mine is windows but choose the version you want here
#!/bin/bash

folder_name="packages"
folder_path="D:/Development Journey/Set-up-test/$folder_name"

# Check if folder exists
if [ ! -d "$folder_path" ]; then
    # Create the folder
    mkdir -p "$folder_path"
    echo "Folder '$folder_name' created! πŸ“"
else
    echo "Folder '$folder_name' already exists! βœ…"
fi

# Download Tailwind CSS
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/download/v3.3.5/tailwindcss-windows-x64.exe

chmod +x tailwindcss-windows-x64.exe

# Rename the downloaded file to 'tailwindcss'
mv tailwindcss-windows-x64.exe tailwindcss

# Move the file to the folder
mv "tailwindcss" "$folder_path"

# Check if file was moved successfully
if [ -f "$folder_path/tailwindcss" ]; then
    echo "File moved to folder '$folder_name' successfully! βœ…"
else
    echo "Failed to move file to folder '$folder_name'. Please check the file path and folder permissions. ❌"
fi

Enter fullscreen mode Exit fullscreen mode

B) if you just want it "there "

#!/bin/bash
 Download Tailwind CSS
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/download/v3.3.5/tailwindcss-windows-x64.exe

chmod +x tailwindcss-windows-x64.exe

# Rename the downloaded file to 'tailwindcss'
mv tailwindcss-windows-x64.exe tailwindcss

Enter fullscreen mode Exit fullscreen mode

Step 2 : Create input.css and an output.css files

you can either do it manually or vscode or use this bash command touch for creating files !

#!/bin/bash

# Create input.css file
touch input.css

# Create output.css file
touch output.css


Enter fullscreen mode Exit fullscreen mode

Step 3 : Next we need to build the Minifying of both CSS files using this bash command

#!/bin/bash
./packages/tailwindcss -i input.css -o output.css --minify
Enter fullscreen mode Exit fullscreen mode

Compile and minify your CSS for production make sure that the path is correct or it wont work with you

BUILD IMAGE

Step 4 : You need to set up a watch command so you can keep the changes synced ! ( also when making this command i had to make sure to put the correct path or it wont work with you )

Path

#!/bin/bash

./packages/tailwindcss -i input.css -o output.css --watch
Enter fullscreen mode Exit fullscreen mode

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay