Introduction
This article contains technical language intended for programmers who are familiar with the term Tailwind CSS.
The Power of React and Tailwind CSS
For React.js-loving web developers, and by extension other framework users, Tailwind CSS has been revolutionary. React already makes coding easier by allowing you to write your HTML and JavaScript together in one file, and Tailwind CSS takes it further by also allowing you to include CSS in the mix. This creates a very efficient trinity for building web applications.
Transitioning to Vanilla HTML and JavaScript
However, there comes a time when we're forced away from frameworks and faced with the option of building with vanilla HTML and JavaScript, as I was recently for a small gig. This made me look into the documentation to confirm if Tailwind CSS was also compatible with vanilla HTML and JavaScript. I was happy to find out it was.
Tailwind CSS with Vanilla HTML and JavaScript
Looking at the documentation, there are two ways to get this done.
The Play CDN Approach
First, there's the simple but crude “Play CDN” (Content Delivery Network) approach where you simply include an external script linking to the Tailwind CSS library in your HTML head section. This method, however, is only for development purposes and not suited for production.
The CLI Tool Approach
Then, there is the production-recommended approach where you install Tailwind CSS in your application via the CLI (Command-Line Interface) tool. The CLI approach is way more performant and is what I eventually used to get the job done. But I won't lie, getting it done satisfactorily was not a straightforward process. The documentation was not explicit enough, and it took the combined effort of the documentation itself, a YouTube tutorial on the matter, explanations from the senior developer who gave me the contract, and my own process analytics as a very knowledge-seeking junior developer to be able to successfully get the installation and, by extension, the job done. Hence this technical writing post to make things easier for you who are also trying to get the same done for the first time.
Step-by-Step Guide
1 Create a Project Folder: First, you need to create a project folder on your computer to host your app repository. Inside the project folder, create a “src” folder to host core files as is conventionally done.
2 Create Necessary Files: In the src folder, create the following empty files: index.html, input.css, and output.css. index.html is your application entry point holding your project's HTML. input.css will hold a few lines of Tailwind configurations and other custom CSS classes you create for situations where Tailwind utility classes alone are inadequate. The output.css will hold the transpiled vanilla CSS from input.css, your tailwind.config.js file, and other utility classes provided by the Tailwind framework. Yes, just like TypeScript is transpiled to JavaScript for production purposes, Tailwind CSS needs to be transpiled to vanilla CSS to work in production.
3 Install Tailwind CSS:
First, run npm install -D tailwindcss
This command installs Tailwind CSS as a development dependency in your project using npm (Node Package Manager). You can also use Yarn or Bun package managers.
Then run npx tailwindcss init
This command uses npx (a package runner tool that comes with npm) to initialize a Tailwind CSS configuration file in your project. Running this command creates a tailwind.config.js file, which you can customize to configure Tailwind's settings and extend its default configuration. This process also creates a package.json file for your app.
4 Configure Your Template Paths: Add the paths to all of your template files in your tailwind.config.js file:
content: ["./src/**/*.{html,js}"],
This is the essence of creating the src folder because, like is done in React or Next.js, Tailwind expects it as the path where your core app files reside.
5 Add the Tailwind Directives to Your input.css File: Add the @tailwind directives for each of Tailwind’s layers to your main CSS file. This is just like is done when using Tailwind in frameworks like React/Next.js.
6 Start the Tailwind CLI Build Process: Run the CLI tool to scan your template files for classes and build your CSS:
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
Note that whenever you make changes to your tailwind.config and maybe input.css file, your app will need to rebuild to stay updated. It’s not efficient to always have to type out or copy and paste this command, so it's wise to create a script in package.json that holds this command. That way, you can easily trigger the build process by simply running the command npm run dev.
7 Start Using Tailwind in Your HTML: Add your compiled CSS file to the <head> and start using Tailwind’s utility classes to style your content. Go ahead and use Tailwind CSS utility classes to style. If using VS Code, you can install the Tailwind CSS IntelliSense extension to give class suggestions and confirmation as you type.
8 See the End Result of Your Code: You can simply do that by opening your index.html in your browser. You can also use the Live Server VS Code extension if you want instead of this. When pushing the repo to production on GitHub, be sure to create a .gitignore file so unnecessary files will be excluded when you initialize git.
Conclusion and Final Thoughts
There you go, thanks for coming to my TED Talk. Feel free to read my other articles and make sure you stay creative and stay building!
Top comments (0)