Security News
pnpm 10.0.0 Blocks Lifecycle Scripts by Default
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
@roots/bud-tailwindcss
Advanced tools
Adds tailwindcss support to Bud
Install @roots/bud-tailwindcss to your project.
Yarn:
yarn add @roots/bud-tailwindcss --dev
npm:
npm install @roots/bud-tailwindcss --save-dev
By default the bud.js tailwind implementation requires no configuration.
If you wish to customize the tailwind configuration you can create a tailwind config file.
bud.js allows for you to write your tailwind config in CommonJS, ESM, TypeScript, JSON or YML. This file should be placed in the root of your project or the project ./config
directory.
bud.tailwind
You can configure tailwind directly in your bud configuration file using bud.tailwind.setConfig
.
bud.tailwind.setConfig({
content: [bud.path(`@src/**/*.{ts,php}`)],
theme: {},
plugins: [],
});
bud.tailwind.setConfig
is just one method available to help you configure tailwindcss.
You can set the tailwindcss content
option with bud.tailwind.setContent
.
bud.tailwind.setContent([bud.path(`@src/**/*.{ts,php}`)]);
You can set the tailwindcss theme
option with bud.tailwind.setTheme
.
bud.tailwind.setTheme({
colors: { primary: `#000000` },
});
You can extend the tailwindcss theme
option with bud.tailwind.extendTheme
.
bud.tailwind.extendTheme({
colors: { primary: `#000000` },
});
This is usually preferred over bud.tailwind.setTheme
as it will merge your theme with the default tailwindcss theme.
You can set the tailwindcss plugins
option with bud.tailwind.setPlugins
.
import forms from "@tailwindcss/forms";
export default async (bud) => {
bud.tailwind.setPlugins([forms]);
};
You can use resolved tailwind values in your bud config files by referencing bud.tailwind.theme
:
export default async (bud) => {
console.log(`colors`, bud.tailwind.theme.colors);
};
You can also use bud.tailwind.getTheme
, which allows you to pass a key to get a specific value:
export default async (bud) => {
console.log(`colors`, bud.tailwind.getTheme(`colors`));
};
bud.js can be configured to allow for you to import tailwind theme values using the (virtual) @tailwind/*
alias.
An example:
import { black } from "@tailwind/colors";
import { sans } from "@tailwind/fontFamily";
export const main = () => {
document.body.style.backgroundColor = black;
document.body.style.fontFamily = sans;
};
Generating the imports can be memory intensive and increase build times, so it is opt-in.
bud.tailwind.generateImports();
Better to generate imports only for specific keys:
bud.tailwind.generateImports([`colors`, `fontFamily`]);
This is a much better than trying to import the actual tailwind config file to read these values for two reasons:
If you don't import from @tailwind/*
nothing is added to the bundle (even if the imports are generated)
Contributions are welcome from everyone.
We have contribution guidelines to help you get started.
@roots/bud-tailwindcss is licensed under MIT.
Keep track of development and community news.
bud.js is an open source project and completely free to use.
However, the amount of effort needed to maintain and develop new features and projects within the Roots ecosystem is not sustainable without proper financial backing. If you have the capability, please consider sponsoring Roots.
FAQs
Adds tailwindcss support to Bud
The npm package @roots/bud-tailwindcss receives a total of 3,796 weekly downloads. As such, @roots/bud-tailwindcss popularity was classified as popular.
We found that @roots/bud-tailwindcss demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.