Блог

Возможно ли использовать синтаксис tailwind и postcss для blazor component изолированный css?

Мне очень нравится Tailwind как CSS-фреймворк, в частности, его использование postcss и @apply функциональность, с помощью которой вы можете объединить css-компоненты tailwinds в отдельный класс.

например

 .some-button {
    @apply px-4 py-2 bg-blue-400 text-white
}
 

Я рассматривал возможность использования Svelte, потому что он предлагает как изоляцию CSS, так и синтаксис postcss @apply. Однако теперь, когда Blazor поддерживает изолированный CSS, я бы очень хотел сделать небольшой шаг вперед и иметь возможность писать стили postcss из компонентного CSS.

Итак … есть идеи, возможно ли это?

Да, это возможно! Протестировано с .NET 5.0

Вам необходимо создать новый проект npm в корневом каталоге projects.

1. Используется npm init для создания нового проекта npm.
2. Добавьте зависимости tailwind и postcss с помощью npm i -D postcss-cli autoprefixer postcss tailwindcss
3. Добавьте конфигурацию для postcss

 // postcss.config.js
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {}
    }
}
 

4. Добавьте tailwind.config.js к проекту с использованием npx tailwindcss init .
   При необходимости вы можете заменить свойство purge, чтобы удалить неиспользуемые классы css. Но это было немного глючно в моих тестах, когда я использовал библиотеку Razor.

 // tailwind.config.js
purge: {
    enabled: true,
    content: [
        './**/*.html',
        './**/*.razor',
        './**/*.razor.css'
    ],
},
 

5. Добавьте buildscript post-css в ваш файл .csproj. Это применит правила postcss к таблицам стилей, объединяемым Blazor после каждой сборки.

Для проектов Blazor:

 <Target Name="PostBuild" AfterTargets="PostBuildEvent">
    <Exec Command="npx postcss $(ProjectDir)obj$(ConfigurationName)net5.0scopedcssbundle$(ProjectName).styles.css -r" />
</Target>
 

Для библиотек компонентов Blazor:

 <Target Name="PostBuild" AfterTargets="PostBuildEvent">
    <Exec Command="npx postcss $(ProjectDir)obj$(ConfigurationName)net5.0scopedcssprojectbundle$(ProjectName).bundle.scp.css -r" />
</Target>
 

Я не уверен, почему путь отличается, я не могу найти никакой документации к нему. Если кто-то знает больше, не стесняйтесь ответить.

Если есть что-то, что не имеет смысла или может быть сделано лучше, пожалуйста, дайте мне знать!