Editor’s note:This guide to using Tailwind CSS in React and Vue.js was last updated on 6 March 2023 to reflect the most recent changes to CSS, add interactive code examples, and add sections on when to use and not use Tailwind CSS. In recent years,CSS libraries like TailwindCSShave be...
Colors for charts are something that always cause me problems. Most of the time, the colors I use are defined in CSS, and all this stuff is happening in JavaScript, so how do you use CSS variables in JavaScript? In my example site, I’m usingTailwindto style ‘all the things’ and b...
Now inside the tailwind.config.js, make sure to include paths to files in the app, pages, components, or src directories whatever you are using or let’s include all of them to avoid any error. tailwind.config.js: /** @type {import('tailwindcss').Config} */ module.exports = { cont...
Import the styles and fonts must be installed in your application directly. import "@fontsource/inter/500.css"; import "@fontsource/inter/700.css"; import "@howso/react-tailwind-flowbite-components/lib/styles.css"; Modify your tailwind.config.js configuration to include: import twContainerQueri...
So although it may not be for everyone I prefer to use the TailwindCSS TypeScript integration, and as a result there are a few additional steps to take when configuring your Blazor project to work with TypeScript. The first step is to reference an additional library in your Blazor Wasm suc...
Now, let’s break this down. The first thing we did was to import Tailwind’s plugin function: constplugin=require("tailwindcss/plugin"); Then we went on to create our plugins in the plugins array: plugins:[plugin(function({addUtilities}){constnewUtilities={".bg-aqua":{background:"aqua...
2.3 Add tailwind imports to your styles 2.4 Use purgecss to remove unused CSS in the production build 3. Simple Demo - use TailwindCSS in your application How to use Google Fonts with Nuxt.js and TailwindCSS How to use SASS with TailwindCSS + PostCSS ...
One of the nice things about this setup is that it already offers an option to include Tailwind CSS during the installation, so no need to set that up separately. Once the project was ready, I added the next-cloudinary package by running: npm install next-cloudinary After that, I set ...
Now that we have our gallery created, we move on to create the Skeleton Loading of each product card. The first thing to do is import the library and the CSS styles. import Skeleton, { SkeletonTheme } from 'react-loading-skeleton' import 'react-loading-skeleton/dist/skeleton.css' As we...
This will include a stack of Vue 3 and Tailwind CSS.php artisan jetstream:install inertiaFinally, let us install the newly added NPM dependencies and compile the assets:npm install && npm run devUp and runningIn order to get the new Laravel app up and running, we...