Resources
VS Code
Tailwind CSS IntelliSense
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
Headwind
https://marketplace.visualstudio.com/items?itemName=heybourn.headwind
A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order:
https://github.com/tailwindlabs/prettier-plugin-tailwindcss
Components
https://preline.co - Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
https://flowbite.com/ - Library of over 450+ UI components, sections, and pages.
https://www.material-tailwind.com/ - React and HTML components library for Material Design.
https://a17t.miles.land/ - A Tailwind CSS plugin that provides atomic components in a neutral design language.
https://tailgrids.com/ - Components and blocks. Some free but mostly paid.
https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation
https://windstatic.com/ - A set of 171 elements & layouts made with Tailwind CSS and Alpine.js.
Tools
[https://chrome.google.com/webstore/detail/gimli-tailwind/fojckembkmaoehhmkiomebhkcengcljl](Gimli Chrome browser extension)
https://tailwindcss-calculator.com/
https://styleguidefortailwind.com/
https://github.com/timlrx/tailwind-nextjs-starter-blog - Starter Blog Template (Next,js + Tailwind)
Copy Tailwind CSS code from any website
Installation for Wordpress and Shopify
For Next.js see: https://tailwindcss.com/docs/guides/nextjs
These setup instructions will install the Tailwind css file in the css folder. The final output file tailwind.css
is saved in the top level. The package.json is also in the top level folder, so pnpm dev
can be run from there.
Update for Tailwind v4.
pnpm init && pnpm install -D tailwindcss @tailwindcss/cli
For plugin development it may require postcss-prefix-selector
to isolate the styles.
pnpm install -D postcss-prefix-selector
Make sure to add /node_modules
to .gitignore.
Install in /css
and generate config files:
mkdir css && cd css
Config file not needed anymore.
Add Tailwind to the main css file, /css/tailwind.css
.
@import "tailwindcss";
Add scripts to package.json
for WordPress:
"dev": "tailwindcss -i ./css/tailwind.css -o ./tailwind.css --watch",
"build": "tailwindcss -i ./css/tailwind.css -o ./tailwind.css --minify"
Add scripts to package.json
for Shopify:
"dev": "postcss css/tailwind.css --output assets/tailwind.css --watch",
"build": "postcss css/tailwind.css --output assets/tailwind.css"
Start Tailwind for development.
pnpm dev
Typography / Prose plugin
https://tailwindcss.com/docs/typography-plugin<br> Beautiful typographic defaults for HTML you don't control. Provides a set of prose
classes.
npm install -D @tailwindcss/typography
Forms Plugin
https://tailwindcss.com/docs/plugins#forms
Wordpress theme setup
Delete everything out of style.css except theme header info.
In functions.php
comment out style.css
and add in tailwind.css
:
wp_enqueue_style(projectX-style', get_template_directory_uri() . '/tailwind.css', array(), filemtime(get_stylesheet_directory() . '/tailwind.css'));
Or insert tailwind.css directly into the header. So, remove css from functions.php
as per above. Then add to header.php
.
<style media="screen">
<?php include dirname(__FILE__).'/tailwind.css'; ?>
</style>
Shopify theme setup
Add to theme.liquid after the base.css line.
{{ 'tailwind.css' | asset_url | stylesheet_tag }}
Globals
Add globals in styles/globals.css:
@layer base {
p {
@apply pt-4;
}
}
Customise the theme
https://tailwindcss.com/docs/adding-custom-styles#customizing-your-theme
Add custom font.
theme: {
fontFamily: {
sans: ["aktiv-grotesk", "sans-serif"],
},
}
Extend the theme:
theme: {
extend: {
fontSize: {
md: "1.0625rem",
},
fontFamily: {
usual: ["usual", "sans-serif"],
},
colors: {
'blk': '#243c5a',
},
},
},
Breakpoints
Can be used in the globals stylesheet like so:
@media screen(md) {
}
With Next.js
To conditionally show a class would be something like this:
function Notification() {
const [isNotification, setIsNotification] = useState(false);
return (
<div className={` ${isNotification ? "animate-ping" : null} h-2 w-2 m-5 bg-sky-400 rounded-full`}></div>
);
}