Tailwind CSS - Easy to setup?

Tailwind CSS - Easy to setup?

A shot of code

2 года назад

14,552 Просмотров

Wondering how easy or difficult it is to setup TailwindCSS in your project. Then take a quick look here to see an overview of the steps required.

I would say in conclusion it is very straightforward with minimal ongoing maintenance requirements.

In this demo we install Tailwind CSS from npm, run the init command to create our Tailwind config file. We specify our html files in the config file and create an input css file that contains the base, components and utilities definitions. Then we run Tailwind from the command line to generate on the fly classes into our output.css file and reference this as a stylesheet within our html file. We can leave this running with the --watch flag

0:43 Install TailwindCSS from npm
1:00 Create Tailwind configuration file
1:16 Configure tailwind.config.js
1:56 Link to tailwind generated css file
2:31 Pull in Base, Components and Utilities
3:15 Run Tailwind from command line
4:43 Apply Tailwind classes


Reference:
https://tailwindcss.com/docs/installation
Ссылки и html тэги не поддерживаются


Комментарии:

@stephmunez
@stephmunez - 19.12.2021 19:37

Hi Mark, is it the v3.0 that's being used in this video?

Ответить
@leader1944
@leader1944 - 16.10.2023 22:39

THANK YOU!! A great tutorial that isn't 20 minutes!

Ответить
@davidschaer
@davidschaer - 14.03.2023 15:30

i watched a bazillion tutorials and never got tailwind running. Until now - thank you very much (y)

Ответить
@jacksonbleechmore2353
@jacksonbleechmore2353 - 24.11.2022 09:42

Have you had any luck using Tailwinds and Lit? I've seen the function unsafeCss in Lit but couldn't figure out how to import the tailwind output css file into my component. An not nice alternative could be a build script to convert the tailwind css into a .ts file.

Ответить
@oka1747
@oka1747 - 16.11.2022 18:23

You are my hero ty

Ответить
@briannoh9235
@briannoh9235 - 06.11.2022 04:08

Do we have to do this whole process for every project we want to use Tailwindcss on?
Would I be able to keep all that in a folder and make a copy of that folder into any project I want to work on to implement tailwindcss?

Ответить
@chinwubachukwudi4483
@chinwubachukwudi4483 - 28.09.2022 23:11

nice, short and precise. Thank you

Ответить
@renzolm26
@renzolm26 - 22.09.2022 18:27

Excelent video! Better explanation i´ve seen so far. Just a few questions, once we´re done with the project, we just close the cmd or do we need to stop it somehow? And when we want to resume with the project once again, we should start it with " npx..... ..... -- watch " again? Thanks, and sorry for my english.

Ответить
@acitbambili7759
@acitbambili7759 - 21.09.2022 05:47

Thanks a lot, it did helped after going around looking for a video on how to install tailwindcss 3.x.x.

Ответить
@kintumagnus
@kintumagnus - 21.08.2022 11:31

Thanks man I was stuck

Ответить
@marcelobaldado514
@marcelobaldado514 - 17.08.2022 16:35

thank you so much!! struggling to find the tailwindcss.config not until I find this video. You deserve more subscribers

Ответить
@abdihakim391
@abdihakim391 - 11.07.2022 10:46

thank you so much for help your content is unique

Ответить
@marcosfitzsimons
@marcosfitzsimons - 08.07.2022 17:30

Thanks, it helped me out of a tight spot.

Ответить
@silenthill8312
@silenthill8312 - 27.06.2022 12:55

Thank you

Ответить
@harshpratapsingh2075
@harshpratapsingh2075 - 01.06.2022 08:42

awesome video! super helpful

Ответить
@muhammadnurullah2512
@muhammadnurullah2512 - 30.05.2022 11:49

Thank you .

Ответить
@danielnicholas1747
@danielnicholas1747 - 17.05.2022 19:41

thank you sir

Ответить
@paolobergamaschi9471
@paolobergamaschi9471 - 11.05.2022 15:59

Thanks for the video

Ответить
@mattecrystal6403
@mattecrystal6403 - 03.05.2022 08:28

for the tailwind.config.js why do you need to put the dot slash in the line

content: ["./index.html"]

in index is in the same parent folder. Why is ./ needed?

Ответить
@mmforyou
@mmforyou - 14.04.2022 15:11

The best video over the internet to make understand how to install Tailwind CSS and how it works to add classes. Thanks a lot, sir,

Ответить
@sergeyzatsepin513
@sergeyzatsepin513 - 13.04.2022 17:28

Where is solving unknown at-rule issue(@tailwind, etc)? Where is setting gulp+tailwind or webpack+tailwind config? Just retelling shitty retarded docs is weak, bro, is weak.

Ответить
@ShlomiAsaf
@ShlomiAsaf - 08.04.2022 02:12

Thank you!!!!! you are awesome!!!!

Ответить
@bloocifer
@bloocifer - 28.03.2022 03:39

perfect video

Ответить
@mohcinbounouara207
@mohcinbounouara207 - 03.03.2022 12:54

Thank you!

Ответить
@majicMix911
@majicMix911 - 23.02.2022 04:33

You actually got my tailwind project fixed and working. Thanks!

Ответить
@AlexFreixa18
@AlexFreixa18 - 16.02.2022 19:06

Thanks for this video! It really helped me a lot to understand how it works.

I had a problem my project which is build on Laravel but my Linux server doesn't support Node.js (I can't install packages with npm or npx). I had to use "curl" for the installation:
curl -sLO [here goes url to github repository]
chmod +x tailwindcss-linux-x64
mv tailwindcss-linux-x64 tailwindcss

For the Tailwind configuration file, the following command line:
./tailwindcss init

Also it is a problem to run Tailwind without npm so I had to do it with the following command line:
./tailwindcss -i ./resources/css/app.css -o ./public/css/output.css --watch

Ответить
@khorajia
@khorajia - 03.02.2022 16:21

Not able to install.

Ответить
@hiddenlearner1911
@hiddenlearner1911 - 30.01.2022 18:24

yeah good video

Ответить
@mouadamzil6520
@mouadamzil6520 - 11.01.2022 19:28

hi Mr Mark i flow your step but something has been
npx: installed 84 in 25.798s
Cannot find module 'postcss'

Ответить
@rogerpence
@rogerpence - 06.01.2022 08:48

Mark--you mentioned Parcel in passing a couple of times. What is it doing for you with regards to Tailwind? (otherwise great, concise video!)

Ответить
@soarhighonlineshop4976
@soarhighonlineshop4976 - 06.01.2022 08:24

You didnt use the tailwind here, you used the css

Ответить
@amirbahador.developer
@amirbahador.developer - 03.01.2022 15:12

ty very much!

Ответить
@ijimmoore
@ijimmoore - 29.12.2021 10:39

If you had any doubts that we would all need this then rest e z. After several other tw vids I am fynally tailwindy 🙂

Ответить
@jakeochukoidamatie723
@jakeochukoidamatie723 - 28.12.2021 02:13

This was super helpful, short and precise 👍

Ответить
@pallavpandey872
@pallavpandey872 - 28.12.2021 00:54

Superbb !! Thank you so so much for this..

Ответить
@arirauff9517
@arirauff9517 - 20.12.2021 00:12

Thank you,is t harder than bootstrab?

Ответить
@sturdymuscles3336
@sturdymuscles3336 - 18.12.2021 12:10

Which one do you recommend to use in our projects? Tailwindcss or Bootstrap?

Ответить
@sturdymuscles3336
@sturdymuscles3336 - 17.12.2021 18:43

Everytime we make a project, we have to install tailwindcss in that project folder?

Ответить
@jayofthebuj
@jayofthebuj - 17.12.2021 00:37

Thank you. You just rescued me

Ответить
@saisinghparihar6640
@saisinghparihar6640 - 16.12.2021 19:43

thanks a lot, was wondering for past two days how to install it.

Ответить
@pratikghadage_
@pratikghadage_ - 16.12.2021 17:52

This video helped alot ❤️Thank you so sooo much 🎉

Ответить
@demiankaledlopezgamez7237
@demiankaledlopezgamez7237 - 15.12.2021 18:03

one doubt the instalation where needs to be?

Ответить
@RajPolinovsky
@RajPolinovsky - 14.12.2021 17:31

Thank you!!!!

Ответить
@ivangunchev4782
@ivangunchev4782 - 14.12.2021 15:29

Thank you for posting this. It was super helpful.

Ответить