Join Login Create a Request

Using TailwindCSS with Django

|
Using TailwindCSS with Django

Designing a website is such a hard task, harder than the backend sometimes. There are many CSS frameworks like bootstrap, foundation and Bulma designed to make life easier for designers. But so far TailwindCSS has proven to be a force in the market.

What is TailwindCSS

Tailwind is a utility-first CSS framework, less opinionated and highly customisable. You can use the utility classes to build websites fast and easily. Unlike bootstrap, tailwind does not impose design specifications like buttons and input components. But it offers utility classes like mt-10 (margin-top), hidden (display: none), mx-10 (margin-left and margin-right). Smart right?.

Advantages of using TailwindCSS

  • Fast
  • Less Opinionated
  • Easy building a responsive design
  • Easy building a dark mode
  • Minimum lines of custom CSS code.

TailwindCSS can easily be used and its utility names are intuitive. 

How to use TailWindCSS with Django framework.

Now, let's look at how we can use Tailwind to build and design a Django website. For this, you need to have npm installed and a Django project setup.

1. Create a directory for keeping your npm packages and other javascript config files.

cd django_project && mkdir jstools && cd jstools
npm install tailwindcss postcss-cli autoprefixer
npx tailwind init
touch postcss.config.js && touch jstools/tailwind.config.js

2. Edit the postcss.config.js file. PostCSS is a tool used to automate routine CSS tasks.

module.exports = {
 plugins: [
     require('tailwindcss'),
     require('autoprefixer')
 ]
}

3. Create the main CSS file from which you will be importing tailwind utilities.

mkdir css; touch css/tailwind.css

Add the following lines in the tailwind.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Add a build script in the jstools/package.js file. 

{
  "scripts": {
        "build": "postcss css/tailwind.css -o ../static/css/prod.css"
  }
}

Now run npm run-script build to build a production-ready CSS file in static/css/prod.css file. Each time you add or modify your JTML files you'll need to run build again to update the CSS file.

5. Configuring where tailwind must look for classes when building (Where your HTML templates are) - This is done inside jstools/tailwind.config.js. 

module.exports = {
  content: [
    '../blog/**/*.{html,js}',
    '../blog/**/**/*.{html,js}',
  ],
  theme: {
    extend: {
      colors: {
        main: 'rgb(36 16 46)'
      }
    },
  },
  plugins: [],
}

Update the "content" section with all the directories with your HTML files then rebuild the prod.css file again. 


Tags.




Recent Posts

Ways to differentiate your services from others as a freelancer
Ways to differentiate your services from others as a freelancer
Ways to differentiate your services from others as a freelan..
Read More
Starting a referral or affiliate program as a freelancer.
Starting a referral or affiliate program as a freelancer.
How to start a referral program as a freelancer. These are s..
Read More
How to build referrals as a freelancer
How to build referrals as a freelancer
Ways to build your referrals as a freelancer. Expand your lo..
Read More
Handling customer Service as a Freelancer
Handling customer Service as a Freelancer
How to handle customer services as a freelancer. Learn the b..
Read More